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

Jamie Chyi

已于 2023-06-01 18:30:18 修改

阅读量1.3k

点赞数 7

分类专栏： vue 文章标签： vue.js javascript ecmascript

于 2023-02-16 16:51:46 首次发布

本文链接：https://blog.csdn.net/qijing19991210/article/details/129065031

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

关键代码：放入你项目中合适的位置

    <el-popover ref="checkPop" placement="bottom" width="200" trigger="click">
      <el-checkbox-group v-model="colCheckList">
        <el-checkbox
          :label="item.value"
          v-for="item in colList"
          :disabled="item.disabled"
          :key="item.value"
          class="checkbox"
        >
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <el-button content="查询字段筛选" effect="" slot="reference">
        <div class="el-icon-setting"></div>
      </el-button>
    </el-popover>

需要操作的字段

 // 所有表格列
      colList: [
        { name: '在运台区总数', value: 'runDistCnt', disabled: false },
        { name: '可算台区总数', value: 'calcDistCnt', disabled: false },
        { name: '系统可算率', value: 'sysCalcRate', disabled: false },
        { name: '压降法可算台区数', value: 'volCalcCnt', disabled: false },
        { name: '压降法可算率', value: 'volCalcRate', disabled: false },
        { name: '大数据可算台区数', value: 'bdCalcCnt', disabled: false },
        { name: '大数据可算率', value: 'bdCalcRate', disabled: false },
        { name: '不可算台区数', value: 'uncalcDistCnt', disabled: false },
        { name: '不可算率', value: 'uncalcDistRate', disabled: false }
      ],
      // 选中表格列
      colCheckList: [
        'runDistCnt',
        'calcDistCnt',
        'sysCalcRate',
        'volCalcCnt',
        'volCalcRate',
        'bdCalcCnt',
        'bdCalcRate',
        'uncalcDistCnt',
        'uncalcDistRate'
      ],
      // 默认列
      defaultColCheckList: [
        'runDistCnt',
        'calcDistCnt',
        'sysCalcRate',
        'volCalcCnt',
        'volCalcRate',
        'bdCalcCnt',
        'bdCalcRate',
        'uncalcDistCnt',
        'uncalcDistRate'
      ],

在所有需要操作的字段上，加入v-if判断

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

        </el-table-column>

判断方法：

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