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

根据权限或者特定条件选择性展示列表，实现动态el-table-column<template><div><el-table :data="tableData"><el-table-columnprop="a"align="center"label="A" v-if="objData.a"/><el-table-columnprop="b"ali

漂移的电子

8951人浏览 · 2021-09-03 16:04:39

漂移的电子 · 2021-09-03 16:04:39 发布

根据权限或者特定条件选择性展示列表，实现动态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>