element-ui table 筛选时 表格出现问题

Question

这是table得代码

       <el-table :data="deptAllScoreList" border style="width:100%" :height='scrollHeight' v-loading="isLoading">
                <el-table-column sortable align="center" label="区域" fixed min-width='100'>
                    <template slot-scope="{row}">
                        {{ row.value.deptTypeName }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" sortable align="center" label="部门" fixed min-width='130'>
                </el-table-column>
                <el-table-column align="center" label="卓越">
                    <el-table-column sortable align="center" label="人数" v-if="isRenshu">
                        <template slot-scope="{row}">
                            {{ row.value.outstanding }}
                        </template>
                    </el-table-column>
                    <el-table-column sortable align="center" label="比例" v-if="isBili">
                        <template slot-scope="{row}">
                            {{ row.value.outstandingRatio }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="优秀">
                    <el-table-column sortable align="center" label="人数" v-if="isRenshu">
                        <template slot-scope="{row}">
                            {{ row.value.excellent }}
                        </template>
                    </el-table-column>
                    <el-table-column sortable align="center" label="比例" v-if="isBili">
                        <template slot-scope="{row}">
                            {{ row.value.excellentRatio }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="良好">
                    <el-table-column sortable align="center" label="人数" v-if="isRenshu">
                        <template slot-scope="{row}">
                            {{ row.value.good }}
                        </template>
                    </el-table-column>
                    <el-table-column sortable align="center" label="比例" v-if="isBili">
                        <template slot-scope="{row}">
                            {{ row.value.goodtRatio }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="合格">
                    <el-table-column sortable align="center" label="人数" v-if="isRenshu">
                        <template slot-scope="{row}">
                            {{ row.value.qualified }}
                        </template>
                    </el-table-column>
                    <el-table-column sortable align="center" label="比例" v-if="isBili">
                        <template slot-scope="{row}">
                            {{ row.value.qualifiedRatio }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="不合格">
                    <el-table-column sortable align="center" label="人数" v-if="isRenshu">
                        <template slot-scope="{row}">
                            {{ row.value.unqualified }}
                        </template>
                    </el-table-column>
                    <el-table-column sortable align="center" label="比例" v-if="isBili">
                        <template slot-scope="{row}">
                            {{ row.value.unqualifiedRatio }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column sortable align="center" label="小计" fixed="right">
                    <template slot-scope="{row}">
                        {{ row.value.total }}
                    </template>
                </el-table-column>
            </el-table>

        handleCheckedTableColumnsChange(val) {
            this.allColumnsSelected = val ? this.tableColumns : [];
            if (this.allColumnsSelected.every(isBelowThreshold)) {
                this.allColumnsSelectedIndeterminate = false
                this.allColumnsSelected = true
                this.isRenshu = true
                this.isBili = true
            } else {
                this.allColumnsSelectedIndeterminate = true
                this.tableColumns.forEach(item => {
                    if (!item.visible) {
                        if (item.label === '人数') {
                            this.isRenshu = false
                        } else {
                            this.isBili = false
                        }
                    }
                })
            }

            // 检测visible是否全部满足条件
            function isBelowThreshold(value, index, ar) {
                if (value.visible) {
                    return true;
                } else {
                    return false;
                }
            }
        },

JS代码得话 我也只是做了两个判断 全选时 就isRenshu 和isBili 都为true 当有一个不满足时 其中一个为false 进行隐藏 原数据是没有改变得

Answer 1

给el-table加个ref="table"属性，然后在handleCheckedTableColumnsChange这个事件里面的最后面添加一句代码

setTimeout(() => {
      this.$refs.table.doLayout()
 }, 100)

注意一定要你设置好了哪些列隐藏哪些列消失后再触发这个重新列表布局的逻辑（按道理是在你handleCheckedTableColumnsChange这个函数的最后去加上这段逻辑），而且时间函数setTimeout一定要加