快捷導(dǎo)航

vue element-ui el-cascader級聯(lián)選擇器數(shù)據(jù)回顯的兩種實現(xiàn)方法

更新時間：2023年07月18日 10:31:49 作者：白開水z

這篇文章主要介紹了vue element-ui el-cascader級聯(lián)選擇器數(shù)據(jù)回顯的兩種實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。

element-ui el-cascader級聯(lián)選擇器數(shù)據(jù)回顯簡單的兩種方法

? <el-cascader
? ? ? ? ? ? ? ref="myCascader"
? ? ? ? ? ? ? clearable
? ? ? ? ? ? ? v-model="regionValue"
? ? ? ? ? ? ? :options="regionOptions"
? ? ? ? ? ? ? :props="regionProps"
? ? ? ? ? ? ? @change="handleChangeRegion"
??? ?></el-cascader>

通過value綁定值判斷是通過name回顯還是id回顯

export default {
? data() {
? ? return{
? ? ? regionValue: ['name1','name2','name3'], ?//（注：name1，name2，name3的數(shù)據(jù)要和name一樣） 通過id回顯 ? regionValue: ['id1','id2','id3'] ?
? ? ? regionOptions: [],
? ? ? regionProps: {
? ? ? ? value: 'name', ? //如果想通過id回顯就 ? value:'id'
? ? ? ? label: 'name',
? ? ? ? children: 'children',
? ? ? },
? ? }
? }
}

注：根據(jù)后端給的數(shù)據(jù)參考本方法測試

element-ui的 Cascader 級聯(lián)選擇器動態(tài)加載數(shù)據(jù)及回顯

在這里插入圖片描述

<template>
  <!-- 測試懶加載 -->
  <el-cascader :props="test_props" :options="test_options" v-model="test_model"></el-cascader>
</template>
<script>
let id2 = 0;
export default {
  name: 'TestView',
  data() {
    return {
      test_options: [
        //回顯值得關(guān)鍵必須要把需要回顯的都寫到options里面，且最后一項要加上leaf:true,表示無下級了才可以回顯；這里寫死，實際要根絕接口返回的需要回顯的數(shù)據(jù)，來遞歸循環(huán)到結(jié)果，賦值給這里；
      ],
      test_model: ['選項1', '選項3'], //模擬后臺取到的默認(rèn)值，這里是單選
      test_props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: 2 }).map((item) => {
              ++id2;
              return {
                id: 1,
                value: `選項${id2}`,
                label: `選項${id2}`,
                leaf: level >= 1
              };
            });
            // 通過調(diào)用resolve將子節(jié)點數(shù)據(jù)返回，通知組件數(shù)據(jù)加載完成
            resolve(nodes);
          }, 1000);
        }
      }
    };
  },
  created() {
    setTimeout(() => {
      this.test_options = [
        {
          value: '選項1',
          label: '選項1',
          id: 2,
          leaf: false,
          children: [{ value: '選項3', label: '選項3', leaf: true }]
        },
        {
          value: '選項2',
          label: '選項2'
        }
      ];
    }, 20000);
  }
};
</script>

要回顯，那么第一級要有數(shù)據(jù)，選中的第二級，第三級也要對應(yīng)上

比如省市區(qū)第一級所有省需要有，第二級，選擇的省下的所有市，第三級，選擇的所有的市下的區(qū)縣，回顯數(shù)據(jù)格式注意好，不對是回顯不了的

獲取到所有省，判斷要回顯的省的id和當(dāng)前省的id一樣的，用這個省的id請求這個省的所有市，循環(huán)所有市，判斷要回顯的市的id，然后拿市的id請求所有區(qū)，最后給options賦值

我這里是文字，存的時候就是文字，所以需要這樣，如果是id，那就簡單了，直接拿對應(yīng)的id請求就行，就是組裝好和寫死的數(shù)據(jù)一樣的格式就行