关于虚拟dom复用导致的组件渲染不一致问题
标签搜索

关于虚拟dom复用导致的组件渲染不一致问题

指针原来是套娃的
2024-12-06 / 0 评论 / 79 阅读 / 正在检测是否收录...

今天开发时,有一个页面需要使用自定义的列表组件,共有两个列表,用按钮切换列表展示,但是第二个列表不需要头部的选择框。
本来配置selection选项即可,但是切换过来第二个列表无论怎么配置还是带着选择框的样式,无法去掉,相同配置放到其他页面却没有选择框。
代码和样式如下:

<-- 部分配置已忽略 -->
<el-table-wrap
          v-if="invoiceStatus === 'bill'"
          :data="dataList"
        >
        <-- 配置选择框 -->
        <el-table-column type="selection" width="40">
        </el-table-column>
</el-table-wrap>
<el-table-wrap
          v-else
          :data="customDataList"
        >
         <-- 没有配置 -->
</el-table-wrap>

m4chooky.png
m4chvbhp.png
但是第二个实现出来却是这样的:
m4chtej3.png

但是奇怪的是,同样的配置在其它界面就没有选择框,最后经过调试发现把v-if改成v-show显示没有问题了。

<-- 部分配置已忽略 -->
<el-table-wrap
          v-show="invoiceStatus === 'bill'"
          :data="dataList"
        >
        <el-table-column type="selection" width="40">
        </el-table-column>
</el-table-wrap>
<el-table-wrap
          v-show="invoiceStatus === 'custom'"
          :data="customDataList"
        >
</el-table-wrap>

原来是v-if和v-show的区别,v-if会把元素销毁,再创建元素的时候,vue在虚拟dom阶段会复用之前的节点,导致第二个列表携带着第一个列表的配置。
v-show只是隐藏显示,两个列表会同时创建,vue会自动标识加上key值。
当然给列表组件加上key也可以解决这个问题,给一个加上即可。

<-- 部分配置已忽略 -->
<el-table-wrap
          v-if="invoiceStatus === 'bill'"
          key="bill"
          :data="dataList"
        >
        <el-table-column type="selection" width="40">
        </el-table-column>
</el-table-wrap>
<el-table-wrap
          v-else
          :data="customDataList"
        >
</el-table-wrap>

有不一致配置时避免使用v-if改为v-show,或者加上key值。

复现demo:

<template>
  <div>
    <el-button type="primary" @click="selection = !selection">切换</el-button>
    <el-table v-if="selection" :data="tableData">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="name" label="姓名" width="120"/>
      <el-table-column prop="address" label="地址" show-overflow-tooltip/>
    </el-table>
    <el-table v-else :data="tableData">
      <el-table-column prop="name" label="姓名" width="120"/>
      <el-table-column prop="address" label="地址" show-overflow-tooltip/>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
      selection: true,
    };
  },
  created() {},
  methods: {},
};
</script>

<style scoped>
</style>
5

评论

博主关闭了所有页面的评论