一、分析问题
1、一个下拉框组件的更新由另一个下拉框组件控制被动更新列表，子级下拉框的值是由父级下拉框的值调用接口获取，每次父级下拉框值的改变都会改变子级下拉框的数据源也就是会改变子级下拉框的options，切换后之前的父级节点找不到就会报了这个错，父级节点不改变(即不切换)的话不会报错
二、解决方案
1、vue页面的html层
<div>
<el-row :gutter="15">
<el-col :span="4">
<div">父级下拉框：</div>
<el-select clearable v-model="parentId" @change="parentSelected" placeholder="请选择父级下拉框">
<el-option
v-for="item in parentInfos"
:key="item.Id"
:label="item.Name"
:value="item.Id">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
<div class="name">子级下拉框：</div>
<el-cascader
class="entity"
ref="cascader"
:key="isChangeSelectKeyNum"
placeholder="请选择子级下拉框"
clearable
filterable
v-model="pId"
:options="options"
:props="{ checkStrictly: true }">
</el-cascader>
</el-col>
</el-row>
</div>
AI 代码解读
2、vue页面的数据定义层
data () {
return {
parentId: '',
parentInfos: [],
pId: '',
loading: false,
list: [],
currPage: 1,
pageSize: 10,
counts: 0,
isChangeSelectKeyNum: 0,
}
},
AI 代码解读
3、vue页面的方法层
methods: {
// 获取XX列表
async parentSelected (val) {
this.loading = true
try {
const data = await GetXXXList({
XXX: val,
})
++this.isChangeSelectKeyNum
this.loading = false
},
}
AI 代码解读
4、本文的核心是isSelectShow，key值改变，级联组件会重新渲染
isSelectShow
5、至于为什么改变key的值，级联组件就会重新渲染？
在Vue中，key是用来追踪每个节点的身份，当key改变时，Vue会认为这是一个新的节点，因此会重新渲染这个组件。
首先，我们需要理解Vue的渲染机制。在Vue中，组件的渲染是基于它们的数据和属性进行的。当这些数据或属性发生变化时，Vue会自动检测到这些变化，并重新渲染相关的组件，以确保视图与数据保持同步。
key属性在Vue中具有特殊的意义。它被用作一个标识符，用于追踪每个节点的身份。当key的值发生变化时，Vue会认为这是一个全新的节点，因为key的变动意味着之前的数据和状态可能已经不再适用。为了确保视图的一致性和准确性，Vue会选择重新渲染这个组件。对于el-cascader组件来说，它是一个级联选择器，通常用于选择有层次结构的数据。当你改变它的key值时，Vue会认为这是一个新的el-cascader组件，因此会触发重新渲染，以确保视图与最新的数据和状态相匹配。
总结起来，改变el-cascader的key值会触发重新渲染，是因为Vue通过key来识别组件的身份，当key发生变化时，意味着组件的状态或数据可能发生了变动，为了保持视图与数据的同步，Vue会选择重新渲染这个组件。
