原来这么简单！Vue实现动态表头详细步骤

1. <el-popover ref="checkPop" placement="bottom" width="200" trigger="click">
2. <el-checkbox-group v-model="colCheckList">
3. <el-checkbox
4. :label="item.value"
5. v-for="item in colList"
6. :disabled="item.disabled"
7. :key="item.value"
8. class="checkbox"
9.         >
10.           {{ item.name }}
11. </el-checkbox>
12. </el-checkbox-group>
13. <el-button content="查询字段筛选" effect="" slot="reference">
14. <div class="el-icon-setting"></div>
15. </el-button>
16. </el-popover>

1. // 所有表格列
2. colList: [
3.         { name: '在运台区总数', value: 'runDistCnt', disabled: false },
4.         { name: '可算台区总数', value: 'calcDistCnt', disabled: false },
5.         { name: '系统可算率', value: 'sysCalcRate', disabled: false },
6.         { name: '压降法可算台区数', value: 'volCalcCnt', disabled: false },
7.         { name: '压降法可算率', value: 'volCalcRate', disabled: false },
8.         { name: '大数据可算台区数', value: 'bdCalcCnt', disabled: false },
9.         { name: '大数据可算率', value: 'bdCalcRate', disabled: false },
10.         { name: '不可算台区数', value: 'uncalcDistCnt', disabled: false },
11.         { name: '不可算率', value: 'uncalcDistRate', disabled: false }
12.       ],
13. // 选中表格列
14. colCheckList: [
15. 'runDistCnt',
16. 'calcDistCnt',
17. 'sysCalcRate',
18. 'volCalcCnt',
19. 'volCalcRate',
20. 'bdCalcCnt',
21. 'bdCalcRate',
22. 'uncalcDistCnt',
23. 'uncalcDistRate'
24.       ],
25. // 默认列
26. defaultColCheckList: [
27. 'runDistCnt',
28. 'calcDistCnt',
29. 'sysCalcRate',
30. 'volCalcCnt',
31. 'volCalcRate',
32. 'bdCalcCnt',
33. 'bdCalcRate',
34. 'uncalcDistCnt',
35. 'uncalcDistRate'
36.       ],

1. <el-table-column prop="sysCalcRate" label="系统可算率" :align="tableAlign" :key="5"
2. v-if="checkStatus('sysCalcRate')">
3. 
4. </el-table-column>

1. checkStatus(el) {
2. return this.colCheckList.includes(el)
3.     },