【vue】動態控制表格列的顯隱（element-ui）

<template>

  <div class="app-container">
    <el-table :data="tableData" stripe border style="width: 98%" ref="tableDataRef">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" width="55" label="序號" align="center"></el-table-column>
      <el-table-column v-if="colData[0].istrue" prop="name" label="名稱" align="center"></el-table-column>
      <el-table-column v-if="colData[1].istrue" prop="select" label="性別" align="center"></el-table-column>
      <el-table-column v-if="colData[2].istrue" prop="kafang" label="年齡" align="center"></el-table-column>
      <el-table-column v-if="colData[3].istrue" prop="fengbi" label="時間" align="center"></el-table-column>
      <el-table-column v-if="colData[4].istrue" prop="isETF" label="事件" align="center"></el-table-column>
      <el-table-column v-if="colData[5].istrue" prop="range" label="地點" align="center"></el-table-column>
 </el-table>
 
 
<el-popover placement="right" width="400" trigger="click">
    <el-checkbox-group v-model="colOptions">
        <el-checkbox v-for="item in colSelect" :label="item" :key="item" ></el-checkbox>
    </el-checkbox-group>
    <el-button slot="reference">設置</el-button>
</el-popover>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CRUD, { presenter, header, form, crud } from './Crud/crud'
import FixedThead from './el-mode/FixedThead'
import crudOperation from './Crud/CRUD.operation'
export default {
  data(){
    return {
      tableData:[
        {name:"a",select:"b",kafang:"c",fengbi:"d",isETF:"e",range:"f"},
        {name:"a",select:"b",kafang:"c",fengbi:"d",isETF:"e",range:"f"}
      ],
      colData: [{title: "名稱",istrue: true},
          {title: "性別",istrue: true},
          {title: "年齡",istrue: true},
          {title: "時間",istrue: true},
          {title: "事件",istrue: true},
          {title: "地點",istrue: true}],
      colOptions: ["名稱","性別", "年齡","時間","事件","地點",], //默認全選
      colSelect: ["名稱", "性別","年齡","時間","事件", "地點",]
    }
  },
  watch: {
    colOptions(valArr) {
      var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未選中
      this.colData.filter(i => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    }
  }
  
}
</script>