今天同事在开发中遇到一个问题,就是使用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>