v-if v-else渲染交叉问题
做项目时遇到一个弹框根据不同类型展现不同内容的情况,因为不想写两个弹框,所以采用v-if和v-else根据类型的不同渲染对应内容。
用到的都是table列表,出现了渲染问题
点击A按钮
点击B按钮
发现这两行并没有根据按钮改变渲染
解决:可能是Vue识别到的是相似组件(高度相似甚至相同),所以就不会更新元素,所以为其加key值标识就可以了。
<el-table :data="tableData" :height="400" class="mt-20" key="1">
</el-table>
做个记录,以后在遇到方便查找。