elementUI前端Table表格选择隐藏列

1、勾选列区域

    <el-checkbox-group v-model="columnSelecteds">
        <el-checkbox v-for="item in columnHeaders" :label="item.title" :key="item.title" >     </el-checkbox>    
    </el-checkbox-group>

2、Table表格

   <el-table 
       :data="tableData" 
       ref="dataTable"
       stripe
       style="width: 100%">
       <el-table-column v-if="columnHeaders[0].isShow" prop="date" label="日期"></el-table-column>
       <el-table-column v-if="columnHeaders[1].isShow" prop="name" label="姓名"></el-table-column>
       <el-table-column v-if="columnHeaders[2].isShow" prop="address" label="地址"></el-table-column>
    </el-table>

3、选择隐藏或显示事件

watch: {
    /**
     * @title 监听列显示隐藏
     */
    columnSelecteds(newArrayVal) {
        // 计算为被选中的列标题数组
        var nonSelecteds = this.columnHeaders
                    .filter(item => newArrayVal.indexOf(item.title) == -1) 
                    .map(item => item.title)
        // 根据计算结果进行表格重绘
        this.columnHeaders.filter(item => {
            let isNonSelected = nonSelecteds.indexOf(item.title) != -1
            if (isNonSelected) {
                // 隐藏未选中的列
                item.isShow = false
                this.$nextTick(() => {
                    this.$refs.dataTable.doLayout()
                })
            } else {
                // 显示已选中的列
                item.isShow = true
                this.$nextTick(() => {
                    this.$refs.dataTable.doLayout()
                })
            }
        })
    }
}

4、传值及设置勾选属性

data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      //表头信息
        columnHeaders: [ 
            {index: 0, title: "日期", isShow: true},
            {index: 1, title: "姓名", isShow: true},
            {index: 2, title: "地址", isShow: true}
        ],  
        //已选择的项
        columnSelecteds: ["日期","姓名", "地址"] 
    }
}

6、运行全图