邯郸网站建设市场,不需要登录的网页小游戏,免费制作二维码网站,广州励网网站建设网络公司问题描述
在使用el-table组件时#xff0c;我们有时需要根据用户的操作动态地添加或删除一些固定列#xff0c;例如操作列或选择列。但是#xff0c;当我们使用v-if指令来控制固定列的显示或隐藏时#xff0c;可能会出现表格的行错位的问题#xff0c;即固定列和非固定列…问题描述
在使用el-table组件时我们有时需要根据用户的操作动态地添加或删除一些固定列例如操作列或选择列。但是当我们使用v-if指令来控制固定列的显示或隐藏时可能会出现表格的行错位的问题即固定列和非固定列的行高度不一致导致表格的布局混乱。例如下面的代码是一个简单的表格其中有一个固定在右侧的操作列该列的显示或隐藏由visremove变量控制
el-table-column fixedright label操作 width120 v-if!visremovediv classitem slot-scopescopeel-popconfirm confirm-button-text好的 cancel-button-text取消 iconel-icon-info icon-colorredtitle确定删除吗 confirmremoverow(scope.row)el-button slotreference typetext sizesmall删除/el-button/el-popconfirm/div
/el-table-column当我们切换visremove的值时可能会出现如下图所示的行错位的问题 问题原因
出现这种问题的原因可能有多种例如
固定列和非固定列的宽度不一致导致表格的总宽度超过了容器的宽度出现了横向滚动条影响了表格的高度计算。固定列和非固定列的内容不一致导致表格的行高度不一致影响了表格的对齐。表格的数据或列发生变化时表格的dom没有及时更新导致表格的布局不正确。
问题解决
针对上述的问题原因我们可以采取以下的一些解决方案
调整表格的宽度使其适应容器的宽度避免出现横向滚动条。调整表格的行高度使其一致避免出现高度不匹配的情况。调用表格的doLayout方法对表格的dom进行重新渲染更新表格的布局。
其中针对本文添加dom触发bug的条件有效的方法是使用doLayout方法该方法可以在表格的数据或列发生变化时对表格的dom进行重新渲染更新表格的布局。我们可以在切换固定列的显示或隐藏的方法中添加表格的刷新方法例如
switchvisremove() {this.visremove !this.visremove;// 调用doLayout方法对表格dom重新渲染// el-table加refmultipleTablethis.$nextTick(() {this.$refs.multipleTable.doLayout();});}这样当我们切换visremove的值时表格的行错位的问题就可以得到解决如下图所示
