el-table动态列的显示与隐藏

一、具体实现效果

通过相关的多选框来控制是否显示或隐藏相关的列。

二、具体实现代码

1、相关多选框具体代码

<el-popover
        placement="bottom"
        width="180"
        trigger="click">
    <el-checkbox-group v-model="checkBoxSelected" @change="handleCheckedColChange">
        <el-checkbox v-for="col in checkBoxContent" :label="col.id" :key="col.id">{{col.title}}</el-checkbox>
    </el-checkbox-group>
    <el-button icon="el-icon-menu" slot="reference" size="mini" style="margin-right: 5px;"></el-button>
</el-popover>

2、相关表格具体代码

<div id="table">
    <el-table v-loading="loading" :key="toggleIndex" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}"
              tooltip-effect="dark" ref="multipleTable" stripe @row-click="rowClick" :data="tableList"
              @selection-change="handleSelectionChange" height="calc(100vh - 256px)">
        <el-table-column v-for="(item, index) in checkBoxContent" sortable
                 v-if="item.isTrue"
                 :key="item.id"
                 :min-width="item.minWidth"
                 :label="item.title"
                 :prop="item.id">
        </el-table-column>
    </el-table>
</div>

3、相关数据的具体设计

checkBoxContent = [{id: '1', title: 'name', minWidth: '100', isTrue: true}]

三、所引起的问题——随着列的消失与隐藏，表格抖动

具体文章可参考：https://blog.csdn.net/weixin_44869002/article/details/118764494