一、分析問題

1、一個下拉框組件的更新由另一個下拉框組件控制被動更新列表，子級下拉框的值是由父級下拉框的值調用接口獲取，每次父級下拉框值的改變都會改變子級下拉框的數(shù)據(jù)源也就是會改變子級下拉框的options，切換后之前的父級節(jié)點找不到就會報了這個錯，父級節(jié)點不改變(即不切換)的話不會報錯

二、解決方案

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>

2、vue頁面的數(shù)據(jù)定義層

data () {
    return {
	  parentId: '',
      parentInfos: [],
      pId: '',
      loading: false,
      list: [],
      currPage: 1,
      pageSize: 10,
      counts: 0,
      isChangeSelectKeyNum: 0,
    }
  },

3、vue頁面的方法層

methods: {
	// 獲取XX列表
    async parentSelected (val) {
      this.loading = true
      try {
        const data = await GetXXXList({
          XXX: val,
        })
        ++this.isChangeSelectKeyNum
      this.loading = false
    },
}

4、本文的核心是isSelectShow，key值改變，級聯(lián)組件會重新渲染

isSelectShow

5、至于為什么改變key的值，級聯(lián)組件就會重新渲染？

在Vue中，key是用來追蹤每個節(jié)點的身份，當key改變時，Vue會認為這是一個新的節(jié)點，因此會重新渲染這個組件。
首先，我們需要理解Vue的渲染機制。在Vue中，組件的渲染是基于它們的數(shù)據(jù)和屬性進行的。當這些數(shù)據(jù)或屬性發(fā)生變化時，Vue會自動檢測到這些變化，并重新渲染相關的組件，以確保視圖與數(shù)據(jù)保持同步。
key屬性在Vue中具有特殊的意義。它被用作一個標識符，用于追蹤每個節(jié)點的身份。當key的值發(fā)生變化時，Vue會認為這是一個全新的節(jié)點，因為key的變動意味著之前的數(shù)據(jù)和狀態(tài)可能已經不再適用。為了確保視圖的一致性和準確性，Vue會選擇重新渲染這個組件。

對于el-cascader組件來說，它是一個級聯(lián)選擇器，通常用于選擇有層次結構的數(shù)據(jù)。當你改變它的key值時，Vue會認為這是一個新的el-cascader組件，因此會觸發(fā)重新渲染，以確保視圖與最新的數(shù)據(jù)和狀態(tài)相匹配。

總結起來，改變el-cascader的key值會觸發(fā)重新渲染，是因為Vue通過key來識別組件的身份，當key發(fā)生變化時，意味著組件的狀態(tài)或數(shù)據(jù)可能發(fā)生了變動，為了保持視圖與數(shù)據(jù)的同步，Vue會選擇重新渲染這個組件。

若本文有幫助到閱讀本文的同學，歡迎點贊、關注、收藏，互相學習交流。