快捷導(dǎo)航

vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯的問(wèn)題及解決

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

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

vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯問(wèn)題

1、需求

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

2、原因分析

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

3、解決方案

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

   /*
    * el-cascader遞歸獲取父級(jí)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é)點(diǎn)
            node.unshift(list[i][this.propsCascader.value || 'value'])
            return node
          }
        }
      }
    },

4、效果圖

5、注意

如果直接將targetViewId賦值后臺(tái)返回的最后一個(gè)id值，也能回顯（最后一級(jí)沒(méi)有選中），其效果如下：

vue+elementui el-cascader回填功能

<el-cascader
              style="width:97%;margin:5px 0;"
              v-model="dataInfo2"
              :options="subjects"
              :props="defaultProps"
              @change="handleChange"
              placeholder="請(qǐng)選擇數(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],刪除一個(gè)
        } else {
          this.dragFrom.measures.splice(arr[k] - k, 1)   //刪除arr[0],刪除一個(gè)，這樣判斷的意思是一直從第一個(gè)開(kāi)始刪除
        }
      }
},