v-if + v-else 踩坑随记 ( 关于 v-else 切换后 导致 el-table 的操作列按钮不显示的问题 )

v-if + v-else 踩坑随记 ( 关于 el-table 的操作列按钮不显示 )

首先, 上错误代码的省略版, 不影响错误展示

<el-drawer
    title="查看详情"
    :visible.sync="detailDialog"
    :direction="'rtl'"
    :size="900">
    <div v-if="show">
    	<el-button type="text" size="small" @click="show=false">查看</el-button>
    </div>
    <div v-else>
    /// 省略了一堆代码
    	<el-table>
            <el-table-column
                align="center"
                label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="toSeeCase(scope.row)">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</el-drawer>

如上代码, 这是在一个侧边弹出的抽屉里写的, 当点击查看切换的时候, el-table能正常展示, 但是操作列的按钮不显示, 需要重新触发一次页面编译才能显示出来

分析el-table的数据没有变化, 所以触发不了视图更新, 导致按钮不显示
el-table 有一个方法, doLayout(), 官方文档的解释如下

应该也是可以解决这个问题, 我没做尝试, 有兴趣的可以试一下

继续说,v-else 面向百度了一会之后, 没有找到很有用的东西, 有人提到过可能是v-else有个延时, 但没有说的很详细

我的解决办法是把 v-else 改成 v-if=“!show” 这样比调用el-table的方法省事点

懒真的是原罪~ 哈哈

暂且记下, 等找到了原因, 再来补充吧, 也欢迎大佬评论区指点迷津