elementui table动态显隐列

效果图如下：

 

 1.html 部分

列设置弹出：

 <el-popover placement="bottom" width="300" trigger="click">
                    <div>
                        <el-checkbox
                            :indeterminate="isIndeterminate"
                            v-model="checkAll"
                            @change="handleCheckAllChange"
                            style="font-size: 18px"
                            >列展示</el-checkbox
                        >
                    </div>
                    <el-divider />
                    <div>
                        <el-checkbox-group v-model="checkboxVal">
                            <el-checkbox
                                v-for="item in tHeadOption"
                                :label="item.prop"
                                :key="item.prop"
                                style="display: block; font-size: 18px; margin-top: 2px"
                                >{{ item.label }}</el-checkbox
                            >
                        </el-checkbox-group>
                    </div>
                    <el-button type="primary" size="small" slot="reference"
                        ><i class="el-icon-setting">列设置</i></el-button
                    >
                </el-popover>

循环渲染出普通表格列和自定义列 

<div v-for="col in bindTableColumns" :key="col.porp">
                    <el-table-column
                        v-if="col.prop == 'index'"
                        :fixed="col.fixed"
                        :align="col.align"
                        :label="col.label"
                        width="60"
                        type="index"
                        :index="indexAdd"
                        :key="1"
                    />
                    <el-table-column
                        v-else-if="col.prop == 'companyName'"
                        :fixed="col.fixed"
                        :align="col.align"
                        :label="col.label"
                        :width="col.width"
                        :key="2"
                    >
                        <template slot-scope="scope">
                            <a
                                :style="{ color: scope.row.color }"
                                @click.prevent="
                                    openProcessRecord(scope.row, tablePagination.pageSize, tablePagination.currentPage)
                                "
                                >{{ scope.row.companyName }}</a
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        :key="3"
                        :fixed="col.fixed"
                        v-else-if="col.prop == 'stopSend'"
                        label="停止发送"
                        width="90"
                        align="center"
                        prop="stopSend"
                    >
                        <template slot-scope="scope">
                            <el-switch
                                :disabled="!['受理员审核退回', '会签退回'].includes(scope.row.progress)"
                                :value="scope.row.sendMsgSwitch"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ccc"
                                @change="pushChange($event, scope.row)"
                                class="switchStyle"
                            >
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :key="4"
                        :fixed="col.fixed"
                        v-else-if="col.prop == 'handle'"
                        label="操作"
                        width="90"
                        prop="handle"
                    >
                        <template slot-scope="scope">
                            <el-button @click="editReview(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="delReview(scope.row)" type="text" size="small">
                                <span style="color: red">删除</span>
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :key="5"
                        :fixed="col.fixed"
                        v-else-if="col.prop == 'companyBack'"
                        label="企业反馈"
                        width="90"
                        align="center"
                        prop="stopSend"
                    >
                        <template slot-scope="scope">
                            <el-button
                                :disabled="!['受理员审核退回', '会签退回'].includes(scope.row.progress)"
                                @click="openFeedBackDialog(scope.row)"
                                type="text"
                                size="small"
                                >反馈</el-button
                            >
                            <el-button
                                @click="
                                    openfBRecordDialog(scope.row, tablePagination.pageSize, tablePagination.currentPage)
                                "
                                type="text"
                                size="small"
                                >记录</el-button
                            >
                            <!-- <el-button @click="delReview(scope.row)" type="text" size="small">
            <span style="color: red">删除</span>
        </el-button> -->
                        </template>
                    </el-table-column>
                    <el-table-column
                        :key="col.id"
                        v-else
                        :label="col.label"
                        :min-width="col.width"
                        :prop="col.prop"
                        :align="col.align"
                    >
                    </el-table-column>
                </div>

 

2.data

 　　　　　　 tHeadOption: reviewMindColumns,// 列头，从单独js文件导入
            isIndeterminate: false, //全选/半选状态
            checkAll: false, //全选
            checkboxVal: reviewMindColumns.map((item) => item.prop), // 选中的值，默认选中全部

3.watch

checkboxVal: {
            handler(newVal, oldVal) {
                let checkedCount = newVal.length
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.tHeadOption.length
                this.checkAll = checkedCount === this.tHeadOption.length
            },
            immediate: true,
        },

 

4.computed

从所有的列头中过滤出选中的

 bindTableColumns() {
            return this.tHeadOption.filter((column) => this.checkboxVal.includes(column.prop))
        },

 

5.防止显隐切换表格列导致页面闪烁问题

    beforeUpdate() {
        /** 在数据加载完，重新渲染表格 */
        this.$nextTick(() => {
            this.$refs.table.doLayout()
        })
    },

 

6.methods

   handleCheckAllChange(val) {
            this.checkboxVal = val ? this.tHeadOption.map((item) => item.prop) : []
            this.isIndeterminate = false
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length
            this.checkAll = checkedCount === this.tHeadOption.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.tHeadOption.length
        },