vue动态控制表格列的显隐（element-ui）

Posted 2021-03-01 lljboke

 1 <template>
 2 
 3   <div class="app-container">
 4     <el-table :data="tableData" stripe border style="width: 98%" ref="tableDataRef">
 5       <el-table-column type="selection" width="55" align="center"></el-table-column>
 6       <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
 7       <el-table-column v-if="colData[0].istrue" prop="name" label="名称" align="center"></el-table-column>
 8       <el-table-column v-if="colData[1].istrue" prop="select" label="性别" align="center"></el-table-column>
 9       <el-table-column v-if="colData[2].istrue" prop="kafang" label="年龄" align="center"></el-table-column>
10       <el-table-column v-if="colData[3].istrue" prop="fengbi" label="时间" align="center"></el-table-column>
11       <el-table-column v-if="colData[4].istrue" prop="isETF" label="事件" align="center"></el-table-column>
12       <el-table-column v-if="colData[5].istrue" prop="range" label="地点" align="center"></el-table-column>
13  </el-table>
14  
15  
16 <el-popover placement="right" width="400" trigger="click">
17     <el-checkbox-group v-model="colOptions">
18         <el-checkbox v-for="item in colSelect" :label="item" :key="item" ></el-checkbox>
19     </el-checkbox-group>
20     <el-button slot="reference">设置</el-button>
21 </el-popover>
22   </div>
23 </template>
24 
25 <script>
26 import Treeselect from ‘@riophae/vue-treeselect‘
27 import ‘@riophae/vue-treeselect/dist/vue-treeselect.css‘
28 import CRUD, { presenter, header, form, crud } from ‘./Crud/crud‘
29 import FixedThead from ‘./el-mode/FixedThead‘
30 import crudOperation from ‘./Crud/CRUD.operation‘
31 export default {
32   data(){
33     return {
34       tableData:[
35         {name:"a",select:"b",kafang:"c",fengbi:"d",isETF:"e",range:"f"},
36         {name:"a",select:"b",kafang:"c",fengbi:"d",isETF:"e",range:"f"}
37       ],
38       colData: [{title: "名称",istrue: true},
39           {title: "性别",istrue: true},
40           {title: "年龄",istrue: true},
41           {title: "时间",istrue: true},
42           {title: "事件",istrue: true},
43           {title: "地点",istrue: true}],
44       colOptions: ["名称","性别", "年龄","时间","事件","地点",], //默认全选
45       colSelect: ["名称", "性别","年龄","时间","事件", "地点",]
46     }
47   },
48   watch: {
49     colOptions(valArr) {
50       var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
51       this.colData.filter(i => {
52         if (arr.indexOf(i.title) != -1) {
53           i.istrue = false;
54           this.$nextTick(() => {
55             this.$refs.tableDataRef.doLayout();
56           });
57         } else {
58           i.istrue = true;
59           this.$nextTick(() => {
60             this.$refs.tableDataRef.doLayout();
61           });
62         }
63       });
64     }
65   }
66   
67 }
68 </script>

test