实现el-table-column动态绑定或展示

根据权限或者特定条件选择性展示列表，实现动态el-table-column

话不多说，上代码：

<template>
    <div>
    <el-table :data="tableData">
    <el-table-column  prop="a"  align="center"   label="A" v-if="objData.a"/>
    <el-table-column  prop="b"  align="center"   label="B" v-if="objData.b"/>
    <el-table-column  prop="c"  align="center"   label="C" v-if="objData.c"/>
  	<el-table-column label="操作"></el-table-column>
    </el-table>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <el-checkbox-group v-model="checkedList" @change="handleCheckedChange">
    <el-checkbox v-for="item in formData" :label="item" :key="item">{{item}}</el-checkbox>
  </el-checkbox-group>
    </div>
</template>
<script>
export default {
  data() {
    return {
      isIndeterminate: true,
      tableData:[{a:111,b:222,c:333}],
      checkedList:['a','b'],
      checkAll: false,
      formData:['a','b','c'],
      objData:{}
    }
  },
  created() {
    this.filterFn()
  },
  methods:{
    handleCheckAllChange(val) {
      this.checkedList = val ? this.formData : [];
      this.isIndeterminate = false;
      this.checkAll=val
      this.filterFn()
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.formData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.formData.length;
    this.filterFn()
    },
    filterFn(){
      let obj={a:false,b:false,c:false}
       this.formData.forEach(v=>{
        this.checkedList.find(item=>{
              if(v==item){
                 obj[v]=true
              }
          })
      })
      this.objData=obj
    }
  },
}
</script>

注意：如果你如下写法，大概率会出现乱序。

<el-table :data="tableData">
  <span v-if="objData.a">
    <el-table-column  prop="a"  align="center"   label="A"/>
  </span>
  <span v-if="objData.b">
      <el-table-column  prop="b"  align="center"   label="B" />
  </span>
  <span v-if="objData.c">
    <el-table-column  prop="c"  align="center"   label="C" />
  </span>
  <el-table-column label="操作"></el-table-column>
</el-table>