vue項目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決

更新時間：2023年07月03日 10:58:12 作者：wocwin

這篇文章主要介紹了vue項目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue項目element-ui級聯(lián)選擇器el-cascader回顯問題

1、需求

el-cascader內(nèi)部是數(shù)組形式的，而后臺接口只需傳入數(shù)組的最后一個字段，但修改時候往往也只返回這最后一個字段，導(dǎo)致el-cascader無法正確回顯

2、原因分析

v-model屬性才是回顯的關(guān)鍵，只有綁定了v-model屬性才會讓 <el-cascader \/> 回顯，而且數(shù)組中的值(即：targetViewId值)一定是最后一級的id加上它父級的id組成

3、解決方案

由于后端返回來的只有最后一級的id，所以我們需要寫一個遞歸來拿到最后一級id和它父級id的數(shù)組。廢話不多說直接上代碼

   /*
    * el-cascader遞歸獲取父級id
    * @param  list 數(shù)據(jù)列表
    * @param  id 后端返回的id
    * propsCascader 是el-cascader props屬性
    **/
    getParentsById(list, id) {
      for (let i in list) {
        if (list[i][this.propsCascader.value || 'value'] == id) {
          return [list[i][this.propsCascader.value || 'value']]
        }
        if (list[i].children) {
          let node = this.getParentsById(list[i].children, id)
          if (node !== undefined) {
            // 追加父節(jié)點
            node.unshift(list[i][this.propsCascader.value || 'value'])
            return node
          }
        }
      }
    },

4、效果圖

5、注意

如果直接將targetViewId賦值后臺返回的最后一個id值，也能回顯（最后一級沒有選中），其效果如下：

vue+elementui el-cascader回填功能

<el-cascader
              style="width:97%;margin:5px 0;"
              v-model="dataInfo2"
              :options="subjects"
              :props="defaultProps"
              @change="handleChange"
              placeholder="請選擇數(shù)據(jù)表"
              size="small">
</el-cascader>
updateChart(id) {
      this.$http.get('url?id='+id)
        .then(res => {
          if (res.data.success === true) {
            this.dataTableId = res.data.data.dataTableId
            this.dragTo.values = res.data.data.dragTo
            this.$refs.hottable.editShowTableMe(res.data.data)
            this.$http.post('url', {id: this.dataTableId})
              .then(response => {
                this.dataInfo2 = [response.data.data[0].directoryId,this.dataTableId]
                this.dragFrom.measures = []
                this.dragFrom.measures = response.data.data[0].design.schema.measure
                this.deleteChecked()
              })
              .catch(function(error) {
                console.log(error)
              })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    deleteChecked() {
      var arr = []
      for (let i = 0; i < this.dragFrom.measures.length; i++) {
        for (let j = 0; j < this.dragTo.values.length; j++) {
          if (
            this.dragFrom.measures[i].column === this.dragTo.values[j].column
          ) {
            arr.push(i)
          }
        }
      }
      for (var k = 0; k < arr.length; k++) {
        if (k == 0) {
          this.dragFrom.measures.splice(arr[k], 1)   //刪除arr[0],刪除一個
        } else {
          this.dragFrom.measures.splice(arr[k] - k, 1)   //刪除arr[0],刪除一個，這樣判斷的意思是一直從第一個開始刪除
        }
      }
},