el-table实现显影列

枚举所有需要显影的列

data() {
    tableCol: [
        {
          width: '120px',
          label: '列1',
          prop: 'prop1',
          isShow: true,
        },
        {
          width: '120px',
          label: '列2',
          prop: 'prop2',
          isShow: true,
        },
        {
          width: '100px',
          label: '列3',
          prop: 'prop3',
          isShow: true,
        },
        {
          width: '100px',
          label: '列4',
          prop: 'prop4',
          isShow: true,
        },
        {
          width: '120px',
          label: '列5',
          prop: 'prop5',
          isShow: true,
        },    
    ]

}

根据tableCol循环出表格列

<el-table
    ref="tables"
    :data="tableData"
  >
    <el-table-column label="序号" type="index" width="70px"></el-table-column>
    <template v-for="(item, i) in tableCol">
      <el-table-column
        :key="i"
        v-if="item.label == '列1' && item.isShow"
        :label="item.label"
        :min-width="item.width"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.thisYear == 0">往年结转</span>
          <span v-if="scope.row.thisYear == 1">今年新增</span>
        </template>
      </el-table-column>
      <el-table-column
        :key="i"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        v-else-if="item.label != '列1' && item.isShow"
      >
      </el-table-column>
    </template>
  </el-table>

设置显隐列的弹窗

<el-button type="text" size="small" @click="setCol">设置显隐列</el-button>
<el-dialog title="设置显隐列" :visible.sync="setColShow" width="20%">
  <div>
    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox
      v-for="(item, i) in copytableCol"
      :key="i"
      v-model="item.isShow"
      style="display:block;"
    >{{item.label}}</el-checkbox>
  </div>
  <div slot="footer">
    <el-button type="primary" @click="colEnter">确定</el-button>
    <el-button @click="setColShow = false">取消</el-button>
  </div>
</el-dialog>

setCol() {
  this.copytableCol = JSON.parse(JSON.stringify(this.tableCol))
  let flag = true
  this.copytableCol.forEach((el) => {
    if (el.isShow == false) {
      flag = false
    }
  })
  this.checkAll = flag
  this.setColShow = true
},
colEnter() {
  this.tableCol = this.copytableCol
  this.setColShow = false
  this.$nextTick(() => {
    this.$refs.tables.doLayout()
  })
  this.copytableCol = []
},
handleCheckAllChange(val) {
  if (val) {
    this.copytableCol.forEach((el) => {
      el.isShow = true
    })
  } else {
    this.copytableCol.forEach((el) => {
      el.isShow = false
    })
  }
},

watch:{
    copytableCol: {
      handler(val) {
        let flag = true
        val.forEach((el) => {
          if (el.isShow == false) flag = false
        })
        this.checkAll = flag
      },
      deep: true,
    },
}