elementUI_select_渲染小现象

乖女子@@@

已于 2022-07-25 10:21:05 修改

阅读量975

点赞数

分类专栏： # elementUI 文章标签： java jquery vue.js

于 2022-07-22 18:43:08 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/125938164

版权

elementUI 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文探讨了在Vue.js中使用el-select组件时遇到的问题：当数据源切换时，已选择的选项无法正确回显。通过案例分析了key值设置为元素value和索引时的不同行为，解释了DOM更新时key值影响组件复用的原理，并展示了两种情况下的实际效果。解决此问题对于优化用户界面和提高应用性能至关重要。

摘要由CSDN通过智能技术生成

<template>
  <div style="margin-top:20px">
    <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in dataList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button @click='listChenge' size='mini'>change</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      listObj:{
        1:[
          {label:'人员1', value:111},
          {label:'人员2', value:222},
          {label:'人员3', value:333}
        ],
        2:[
          {label:'人员4', value:444},
          {label:'人员5', value:555},
          {label:'人员6', value:666}
        ],
        3:[
          {label:'人员7', value:777},
          {label:'人员8', value:888},
          {label:'人员9', value:999}
        ],
      },
      index:1,
      dataList:[],
      value:111
    }
  },
  created(){
    this.listChenge()
  },
  methods:{
    listChenge(){
      this.index = this.index<=3 ? this.index : 1
      this.dataList = this.listObj[this.index]
      this.index++
    }
  }
}
</script>

过程
- [1]默认选择人选1 ，下拉框列表为listObj的第一个元素列表；
- [2]点击change按钮，下拉框列表改变，但是选中值依旧能正常回显

key值为索引

<template>
  <div style="margin-top:20px">
    <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="(item,index) in dataList"
      :key="index"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button @click='listChenge' size='mini'>change</el-button>
  </div>
</template>

过程
- [1]默认选择人选1 ，下拉框列表为listObj的第一个元素列表；
- [2]点击change按钮，下拉框列表改变，但是选中值不能正常回显，回显值为value而非label

原因

当dom更新时，key值为value时
- [1]进行path，通过sameVnode方法进行比较会被判断为同一元素;
- [2]pathVnode比较 oldVnode==vnode，直接复用；
- 因此没有重新渲染
当dom更新时，key值为index时
- 进行path，由于key值不相同，sameVnode方法进行比较会被判断为非同一元素，直接替换;
- 渲染真实dom进行更新