123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173 |
- /**
- *@author:Guoxiaohuan
- *@date:2020.05.27
- *@info:图例编辑状态
- */
- <template>
- <div class='view'>
- <div class='legend-tab2' v-if='tableData.length>0'>
- <div class='legend-table2-box'>
- <div class='legend-table2' v-if='tbData1.length>0'>
- <el-table ref='multipleTable' height='430px' :data='tbData1' tooltip-effect='dark' @selection-change='handleSelectionChange'>
- <el-table-column prop='project' label='项目' width='100'></el-table-column>
- <el-table-column prop='num' label='数量'>
- <template slot-scope='{row}'>
- <div style='width:50px'>
- <el-input v-model='row.num' size='mini'></el-input>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop='type' label='单位' width='60'></el-table-column>
- <el-table-column prop='lege' label='图例'>
- <template slot-scope='scope'>{{ scope.row.lege }}</template>
- </el-table-column>
- </el-table>
- </div>
- <!-- <div class='legend-table2' v-if='tbData2.length>0'>
- <el-table ref='multipleTable' height='430px' :data='tbData2' tooltip-effect='dark' @selection-change='handleSelectionChange'>
- <el-table-column prop='project' label='项目' width='100'></el-table-column>
- <el-table-column prop='num' label='数量'>
- <template slot-scope='{row}'>
- <div style='width:50px'>
- <el-input v-model='row.num' size='mini'></el-input>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop='type' label='单位' width='60'></el-table-column>
- <el-table-column prop='lege' label='图例'>
- <template slot-scope='scope'>{{ scope.row.lege }}</template>
- </el-table-column>
- </el-table>
- </div>-->
- <!-- <div class='legend-table2' v-if='tbData3.length>0'>
- <el-table ref='multipleTable' height='430px' :data='tbData3' tooltip-effect='dark' @selection-change='handleSelectionChange'>
- <el-table-column prop='project' label='项目' width='100'></el-table-column>
- <el-table-column prop='num' label='数量'>
- <template slot-scope='{row}'>
- <div style='width:50px'>
- <el-input v-model='row.num' size='mini'></el-input>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop='type' label='单位' width='60'></el-table-column>
- <el-table-column prop='lege' label='图例'>
- <template slot-scope='scope'>{{ scope.row.lege }}</template>
- </el-table-column>
- </el-table>
- </div>-->
- </div>
- <div class='swich'>
- <el-switch v-model='value'></el-switch>
- <span>隐藏数量为0的项目</span>
- </div>
- <div class='legendFoot'>
- <el-button size='mini' @click='cancel'>取消</el-button>
- <el-button size='mini' type='primary'>保存</el-button>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- props: ['tableData'],
- data() {
- return {
- value: false,
- showT: false,
- tbData1: [],
- tbData2: [],
- tbData3: []
- }
- },
- methods: {
- handleSelectionChange(val) {
- this.multipleSelection = val
- },
- cancel() {
- this.$emit('cance')
- },
- init() {
- this.tbData1 = []
- this.tbData2 = []
- this.tbData3 = []
- if (this.tableData.length > 0) {
- this.tbData1 = this.tableData
- // 以下不要动 不要删
- // let len = this.tableData.length
- // if (len <= 10) {
- // this.tbData1 = this.tableData
- // } else if (len > 10 && len <= 20) {
- // this.tbData1 = this.tableData.slice(0, 10)
- // this.tbData2 = this.tableData.slice(10, len)
- // } else if (len > 10 && len <= 30) {
- // this.tbData1 = this.tableData.slice(0, 10)
- // this.tbData2 = this.tableData.slice(10, 20)
- // this.tbData3 = this.tableData.slice(20, len)
- // } else {
- // this.tbData1 = this.tableData.slice(0, parseInt(len / 3))
- // this.tbData2 = this.tableData.slice(parseInt(len / 3), parseInt(len / 3) * 2)
- // this.tbData3 = this.tableData.slice(parseInt(len / 3) * 2, len)
- // }
- }
- }
- },
- mounted() {
- this.init()
- }
- }
- </script>
- <style lang="less" scoped>
- .view {
- position: relative;
- .legend-tab2 {
- position: absolute;
- top: -44px;
- right: 44px;
- // width: 1046px;
- height: 535px;
- min-width: 350px;
- width: auto;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
- border-radius: 2px;
- border: 1px solid rgba(228, 229, 231, 1);
- .legend-table2-box {
- display: flex;
- justify-content: flex-end;
- .legend-table2 {
- padding: 16px 10px;
- height: 430px;
- width: 345px;
- }
- }
- }
- .swich {
- position: absolute;
- right: 16px;
- bottom: 56px;
- span {
- margin-left: 8px;
- }
- }
- .legendFoot {
- position: absolute;
- right: 16px;
- bottom: 12px;
- }
- }
- </style>
- <style lang="less">
- .view {
- .el-input--mini .el-input__inner {
- width: 50px;
- }
- .el-input__inner {
- padding: 0 5px;
- }
- .legend-container .el-table td,
- .legend-container .el-table th {
- padding: 4px 0 !important;
- }
- }
- </style>
|