vue动态改变el-table表格列

<template>
  <div class="conter">
    <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>
  export default {
    data() {
      return {
        tableData: [{
            name: 'fruit-1',
            date: 'apple-10',
            select: 'banana-10',
            kafang: 'orange-10'
          },
          {
            name: 'fruit-2',
            date: 'apple-20',
            select: 'banana-20',
            kafang: 'orange-20'
          }
        ],
        colData: [
          {title: "名称",istrue: true},
          {title: "性别",istrue: true},
          {title: "年龄",istrue: true},
          {title: "时间",istrue: true},
          {title: "事件",istrue: true},
          {title: "地点",istrue: true}
        ],
        colOptions: [],
        colSelect: [],
      }
    },
    mounted() {},
    created() {
      var _this = this;
      for (let i = 0; i < _this.colData.length; i++) {
        _this.colSelect.push(_this.colData[i].title);
        // if (_this.colData[i].title == '名称') { //初始化不想展示的列可以放在这个条件里
        //   continue;
        // }
        _this.colOptions.push(_this.colData[i].title); 
      }
    },
    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();
            });
          }
        });
      }
    },
    methods: {
    }
  }
</script>