element中el-cascader的使用

從后端拿到arr數(shù)據(jù)結(jié)構(gòu)：

cityList: [
? ? {
? ? ? ? id: 1,
? ? ? ? name: '北京',
? ? ? ? child: [
? ? ? ? ? ? id: 11,
? ? ? ? ? ? name: '大興區(qū)',
? ? ? ? ? ? child: [
? ? ? ? ? ? ? ? id: 111,
? ? ? ? ? ? ? ? name: '亦莊'
? ? ? ? ? ? ]
? ? ? ? ]
? ? }
]

vue文件代碼

<template>
<el-cascader
    :options="cityList"
    :props="optionProps"
    v-model="selectedOptions"
    @change="handleChange">
</el-cascader>
</template>

<script>
data: {
    optionProps: {
        value: 'id',
        label: 'name',
        children: 'child'
    }
}
</script>

使用el-cascader報(bào)錯(cuò)解決

項(xiàng)目中使用到了element-ui中的cascader級聯(lián)選擇器，組件下拉列表是動(dòng)態(tài)的，根據(jù)用戶選擇的類型來從后臺請求數(shù)據(jù)

  <el-select v-model="type" @change="getCascader" placeholder="請選擇類型">
    <el-option
      v-for="item in type"
      :key="item.typeValue"
      :label="item.typeName"
      :value="item.typeValue"
    />
  </el-select>
  <el-cascader
    :options="cascaderOption"
    :props="props"
    v-model="cascaderValue"
    collapse-tags
    :placeholder="請先選擇類型"
  />

再根據(jù)后臺獲取的數(shù)據(jù)，加載級聯(lián)選擇器

getCascader() {
  this.cascaderValue= []      
  getCascader(this.type).then(response => {
    this.cascaderOption = response.data.data
  });
}

于是就出現(xiàn)bug了

一、options為空的情況

場景：有的類型沒有數(shù)據(jù)，這時(shí)cascader的options是[ ]，下拉框是空的。

如果選擇了一個(gè)類型，根據(jù)類型獲取了cascader的數(shù)據(jù)，在cascader中選擇了一條數(shù)據(jù)，再更換類型，沒有這條數(shù)據(jù)了就會報(bào)錯(cuò)

[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null

TypeError: Cannot read property 'level' of null

根據(jù)報(bào)錯(cuò)信息點(diǎn)進(jìn)去看了一下，發(fā)現(xiàn)cascader有選中項(xiàng)的綁定值checkedValue和點(diǎn)擊的父節(jié)點(diǎn)（高亮）activePath ， 即便設(shè)置了this.cascaderValue= [] ，cascader中的activePath還是有值，也就是點(diǎn)擊的父節(jié)點(diǎn)會被記錄下來，再次加載cascader找不到就會報(bào)錯(cuò)。

解決：如果沒有數(shù)據(jù)就將cascader設(shè)置為不可編輯

<el-cascader
   :options="cascaderOption"
   :props="props"
   :disabled="optionsChanged"
   v-model="cascaderValue"
   collapse-tags
   :placeholder="showPlaceholder"
 />

并且直接return，不加載下拉節(jié)點(diǎn)

getCascader() {
  this.cascaderValue= []      
  getCascader(this.type).then(response => {
  if(response.data.data.length === 0){
      this.optionsChanged = true
      this.showPlaceholder = '暫無范圍'
      return
    }
    this.cascaderOption = response.data.data
  });
}

二、編輯時(shí)給cascader賦值

場景：cascader下拉節(jié)點(diǎn)的數(shù)據(jù)由后臺提供，編輯時(shí)的顯示值依然讓后臺提供，將后臺返回的信息直接賦值給cascaderthis.type = row.type //row為后臺返回的數(shù)據(jù)。

這樣賦值是可以顯示的，但是改變類型后，cascader的options又動(dòng)態(tài)改變，這就導(dǎo)致了cascader的value在下拉節(jié)點(diǎn)中不存在，又跟一options為空的情況報(bào)了同樣的錯(cuò)誤

[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null

TypeError: Cannot read property 'level' of null

剛開始以為是后臺返回的數(shù)據(jù)有問題，將后臺返回的數(shù)組直接寫死賦值給cascader就不會報(bào)錯(cuò)，只要數(shù)據(jù)寫死就不會報(bào)錯(cuò)，動(dòng)態(tài)賦值就報(bào)錯(cuò)。

this.type = ['1','2']

真讓人摸不著頭腦。 

解決：叫上后臺一起排查后發(fā)現(xiàn)將返回的options中的value從string改成了int就可以了

三、點(diǎn)擊了父節(jié)點(diǎn)后改變了cascader的options

場景：后面又發(fā)現(xiàn)了一個(gè)bug，就是點(diǎn)擊了父節(jié)點(diǎn)但是并沒有選中的時(shí)候，改變了類型，options也動(dòng)態(tài)改變了，改變后沒有這個(gè)父節(jié)點(diǎn)就會報(bào)錯(cuò)。

當(dāng)然，選中了節(jié)點(diǎn)同樣會報(bào)錯(cuò)，只要有activePath 就會報(bào)錯(cuò)。

[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null

TypeError: Cannot read property 'level' of null

解決：與一options為空的bug類似，重新渲染cascader都可以解決。

改變類型，cascader的options改變后，將cascader重新渲染。

重新渲染組件的方法有兩種：

• 1、給cascader設(shè)置v-if，改變類型后，賦值options前將v-if設(shè)置為true就可以重新渲染cascader，但是這樣有個(gè)缺陷就是不流暢，v-if設(shè)置為false時(shí)cascader的位置會空白，影響用戶體驗(yàn)。
• 2、給cascader設(shè)置一個(gè)key，改變類型時(shí)也改變key值，key值改變了，cascader就會重新渲染

<el-cascader
	:key="isResouceShow"
   :options="cascaderOption"
   :props="props"
   :disabled="optionsChanged"
   v-model="cascaderValue"
   collapse-tags
   :placeholder="showPlaceholder"
 />

getCascader() {
  this.cascaderValue= []
  ++this.isResouceShow      
  this.showPlaceholder = '請先選擇所屬范圍'
  getCascader(this.type).then(response => {
	  if(response.data.data.length === 0){
	      this.optionsChanged = true
	      this.showPlaceholder = '暫無范圍'
	      return
	    }
  this.cascaderOption = response.data.data
  });
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論