用 element-ui 表格做显示/隐藏列功能时踩的坑

问题描述

做显示/隐藏列的功能就很简单了，实现过程不细说了。大概就是从接口返回要显示的列，把这些列存到数组中，再在表格里用 v-if 去处理隐藏和显示的逻辑。

<!-- template -->
<el-table>
    <el-table-column v-if="showColumns.includes('columnA')"></el-table-column>
    <el-table-column v-if="showColumns.includes('columnB')"></el-table-column>
</el-table>

// script
{
    data() {return {
        // ...
        showColumns: []
    }},
    mounted() {
        getColumns().then((res) => {
            this.showColumns = res.data
        })
    }
}

这么写的话在一些简单的业务里不会有问题，但表格复杂了之后就会出问题了。目前见过的问题有两个：

用了表格的“展开行”功能后，在反复隐藏/展示列操作后，表格结构会崩掉。推测是 Vue 对组件的复用引起的问题，让表格重新加载即可。

用 element-ui 表格做显示/隐藏列功能时踩的坑

图中红框的部分高度和两边不一样

反复隐藏/展示列的过程中，可能会出现重复列或再也出不来的列。这个原因还不知道，但是解决了 1 的问题后，这个问题也再也没出现过了。

解决方案

在变更显示列的时候让表格强制重新加载即可。

<el-table :key="tableKey">

{
    data() {return {
        // ...
        tableKey="random_string"
    }},
    watch: {
        showColumns() {
            this.$nextTick(() => {
                 this.$refs.finalTable.doLayout()
                 this.tableKey = `${Math.random()}`
            })
        }
    }
}