el-table controls the display and hiding of columns

1. Preamble

        The source code is below, copy and paste to run

        When a table has too many columns, you want to show/hide some columns, the target effect is as follows:

• By default, all columns are displayed

• hide a column

 

2. Principle

(1) The data data includes: tableData is the table data, columns is the table header data, checkColumns is the selected data, checkAll is whether to select all, by default, all data is displayed, and a switch to display or not is added for each row of data in columns, by default Both are true.

 

(2) The method of judging whether to display the table column

(3) Determine whether to select all and refresh the table

 

(4) Select column: check box @change event parameter val, which returns an array of selected check boxes

 

(5) Reset event

        

 

(6) Select all/anti-select all events

 

3. Source code

  This is the component, reference and register the component to use it

<template>
    <div>
        <el-popover placement="left" trigger="hover" class="popover" @show="showPopover">
            <div style="display: flex; justify-content: space-between;align-items: center;">
                <el-checkbox v-model="checkAll" @change="checkAllChangeFn">列展示</el-checkbox>
                <el-button type="text" @click="reset(true)">重置</el-button>
            </div>
            <el-divider></el-divider>
            <el-checkbox-group v-model="checkColumns" @change="changeColumns">
                <el-checkbox v-for="(item, key) in columns" :label="item.label"></el-checkbox>
            </el-checkbox-group>
            <i class="el-icon-s-tools" slot="reference"></i>
        </el-popover>

        <el-table ref="table" id="table" :data="tableData" border style="width: 100%; margin: 20px 0;">
            <template v-for="item in columns">
                <el-table-column v-if="showColumn(item.prop)" :prop="item.prop" :label="item.label"></el-table-column>
            </template>
        </el-table>
    </div>
</template>
   
<script>

export default {
    name: 'App',
    data() {
        return {
            tableData: [{
                date: '2016-05-01',
                name: '王小虎',
                age: 13,
                money: 100
            }, {
                date: '2016-05-02',
                name: '王小虎',
                age: 25,
                money: 333
            }, {
                date: '2016-05-03',
                name: '王小虎',
                age: 33,
                money: 555
            }, {
                date: '2016-05-04',
                name: '王小虎',
                age: 23,
                money: 200
            },
            {
                date: '2016-05-05',
                name: '王小虎',
                age: 26,
                money: 666
            }],
            columns: [
                { label: '日期', prop: 'date', isShow: true },
                { label: '姓名', prop: 'name', isShow: true },
                { label: '年龄', prop: 'age', isShow: true },
                { label: '财产', prop: 'money', isShow: true },
            ],
            checkColumns: [],
            checkAll: false,
        }
    },
    methods: {
        // 全选复选框事件监听
        checkAllChangeFn(val) {
            if (val) {
                // 全选
                this.reset(true);
            } else {
                // 反全选
                this.reset(false);
            }
        },
        // 重置，flag: Boolean，全部重置为flag
        reset(flag) {
            this.columns.forEach(item => {
                item.isShow = flag;
            })
            this.showPopover();
            this.refreshTable();
        },
        // 表格列是否显示的方法
        showColumn(currentColumn) {
            return this.columns.find(item => item.prop == currentColumn).isShow;
        },
        /* 选择列 */
        changeColumns(val) {
            this.columns.forEach(item => {
                item.isShow = false;
            })
            // columns将val数组存在的值设为true，不存在的设为false
            val?.forEach(item => {
                let current = this.columns.find(i => i.label == item)
                current.isShow = true;
            })
            // 判断是否全选
            this.judgeIsCheckAll();
            this.refreshTable();
        },
        // 重新渲染表格
        refreshTable() {
            this.$nextTick(() => {
                this.$refs.table.doLayout();
            })
        },
        // 气泡框出现
        showPopover() {
            this.checkColumns = []
            this.columns.forEach(item => {
                if (item.isShow) {
                    this.checkColumns.push(item.label)
                }
            })
            // 判断是否全选
            this.judgeIsCheckAll();
        },
        // 判断是否全选
        judgeIsCheckAll() {
            // 选中的长度 = 表格列的长度  全选按钮就选中
            if (this.checkColumns.length == this.columns.length)
                this.checkAll = true
            else
                this.checkAll = false
        }
    }
}
</script>
   
<style scoped>
/* 分割线 */
.el-divider {
    margin: 10px 0;
}

/* 复选框 */
.el-checkbox-group {
    display: flex;
    flex-direction: column;
}

/* 操作列图标位置 */
.popover {
    display: flex;
    justify-content: flex-end;
    font-size: 30px;
}
</style>