vue实现el-table自定义显示列

效果图如下，选中时能实时展示不同的列

表格数据可以替换成数据库获取的数组数据进行填充。

<template>
  <div style="line-height: 25px;margin-top: 50px;">
      <el-table :data="tableList">
        <el-table-column type="selection"></el-table-column>
        <el-table-column
          v-for="(item,index) in tableHeader"
          :key="index"
          show-overflow-tooltip
          :label="item.lable"
          :prop="item.key"
          v-if="colData[index].istrue"
        >
        </el-table-column>
        <el-table-column align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
            >删除</el-button>
          </template>
          <template slot="header" slot-scope="scope">
            <el-popover placement="bottom" trigger="click">
              <div v-for="(item,index) in tableHeader" :key="index">
                <el-checkbox :label="item.lable" v-model="colOptions"></el-checkbox>
              </div>
              <div slot="reference">操作<i class="el-icon-setting"></i></div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
      // 表格数据
      tableList:[
        {
          id:'1',
          name:'测试名称',
          school:'测试学习',
          class:'测试班级',
          sex:'测试性别'
        }
      ],
      colOptions:['编号','名称','学校','班级','性别'],
      colSelect:['编号','名称','学校','班级','性别'],//
      // 判断是否显示
      colData:[
        {title:'编号',istrue:true},
        {title:'名称',istrue:true},
        {title:'学校',istrue:true},
        {title:'班级',istrue:true},
        {title:'性别',istrue:true},
      ],
      // 表头数据
      tableHeader:[
        {lable:'编号',key:'id'},
        {lable:'名称',key:'name'},
        {lable:'学校',key:'school'},
        {lable:'班级',key:'class'},
        {lable:'性别',key:'sex'},
      ]
    };
  },
  watch:{
    colOptions(val){
      if(val){
        var arr = this.colSelect.filter(i=>val.indexOf(i)<0);//取出被选择的项
        this.colData.filter(i=>{//显示列表过滤
          if(arr.indexOf(i.title)>-1){//当选择的值匹配时不显示
            i.istrue=false
          }else{
            i.istrue=true
          }
        })
      }
    }
  },
  created() {
  },
  methods: {}
};
</script>