Element中table使用v-show不生效,使用v-if生效

今天同事在开发中遇到一个问题,就是使用table中的type控制表格中两列,其中一列显示另一列则隐藏,同时位置有所改变,在切换tab中,发现一个bug就是tab切换到第二次的时候,显示是对的但是位置发生了变化。

当时我感觉频繁操作建议让他改成v-show,结果发现没生效,主要是因为table中的td,diplay:table-cell,权限高于display:none,导致v-show失效。

后面只能改成v-if,考虑到dom操作过程中,无法识别相同dom标签,导致重复使用td,需要对标签添加key值做唯一标识。

最终解决方案如下:

<el-table-column key="0" label="解决问题" prop="tableData.date1" v-if="type===0"></el-table-column>

<el-table-column key="1" label="等待解决问题"  prop="tableData.date2" v-if="type!==0"></el-table-column>

猜你喜欢

转载自blog.csdn.net/qq_30596783/article/details/121037273
今日推荐