【Vue】vue中如何自定义表格表头的展示与隐藏

功能描述：当想改变表格的表头时，通过点击表格表头，弹出弹框，选择需要展示的选项或勾选掉想隐藏的选项来控制表格表头的展示与隐藏

具体功能如下:

在HTML中定义一个table表格及一个dialog弹框，弹框中展示所有表头的选项

//表格
<el-table
          :data="tableData"
          height="250"
          style="width: 100%;"
          border
          @header-click="contextmenu"
        >
          <el-table-column v-if="colData[0].istrue" label="值1" prop="value01" />
          <el-table-column v-if="colData[1].istrue" label="值2" prop="value02" />
          <el-table-column v-if="colData[2].istrue" label="值3" prop="value03" />
        </el-table>


//弹框
<el-dialog
      title="列表选项"
      width="30%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-checkbox-group v-model="colOptions">
        <el-checkbox
          v-for="(item,index) in colSelect"
          :key="index"
          style="margin-right:20px"
          :label="item"
        />
      </el-checkbox-group>
    </el-dialog>

js的data中定义html中用到的参数

 data() {
    return {
      // table表头选项弹框
      dialogVisible: false, // 右键菜单的显示与隐藏
      // 所有列
      colOptions: ['值1', '值2', '值3'], // 多选框的选择项      // 被选中的列
      colSelect: ['值1', '值2', '值3'],  // 多选框已选择的内容，即表格中显示的列
      // istrue属性存放列的状态
      colData: [
        { title: '值1', istrue: true },
        { title: '值2', istrue: true },
        { title: '值3', istrue: true }
      ],
      // 模型列表
      tableData: [
        {
          value01: '值1',
          value02: '值2',
          value03: '值3'
        },
        {
          value01: '值1',
          value02: '值2',
          value03: '值3'
        }
      ]
    }
  },

在js的methods中实现点击table表头弹出自定义表头的弹框的方法contextmenu()

// 点击表格表头弹出框
    contextmenu(row, event) {
      this.dialogVisible = true
      console.log(event, row)
    },

在js的watch中通过监听弹框中所选项的变化来改变table中表头的显示与隐藏

// 监听
  watch: {
    colOptions(newVal, oldVal) {
      if (newVal) { // 如果有值发生变化，即多选框的已选项变化
      // 过滤colSelect中未选中的项
        var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0)
        // 过滤colData中的项来控制表头的显示与隐藏
        this.colData.filter(i => {
          if (arr.indexOf(i.title) !== -1) {
            i.istrue = false
          } else {
            i.istrue = true
          }
        })
      }
    }
  },