Vue-使用ElementUI級聯選擇器懶載入省市縣資料

問題描述

官網的描述這裡就不說了

在data裡面定義一個props作為全域性資料,請求非同步方法,再通過resolve()去更新元件

但是我們在實際專案中,要請求後臺的,呼叫的是我們在methods裡面定義的方法

解決方法

methods中請求後臺的方法

//請求省資料
 async getProvince(callback) {
      let res = await this.$api.getProvince();
      if (res.data.code == 200) {
        callback(res.data.provinces);
      }
    },
 //請求市資料
    async getCity(params) {
      let res = await this.$api.getCity(params);
      if (res.data.code == 200) {
        return res.data.cities;
      }
    },
 //請求縣資料
    async getArea(params) {
      let res = await this.$api.getArea(params);
      if (res.data.code == 200) {
        return res.data.areas;
      }
    },

data資料

 data() {
    let that = this;
    return {
      props: {
        //級聯選擇器懶載入
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          console.log(level, node);
          if (level == 0) {
            that.getProvince((list1) => {
              let arr = list1.map((e) => ({ value: e.pid, label: e.pname }));
              resolve(arr); // 通過呼叫resolve將子節點資料返回，通知元件資料載入完成
            });
          }
          if (level == 1) {
            let { value } = node;
            that.getCity({ pId: value }).then(list2=>{
              let arr = list2.map((e) => ({ value: e.cId, label: e.cName }));
              resolve(arr);
            });
          }
          if (level == 2) {
            let { value } = node;
            that.getArea({ cId: value }).then(list3=>{
              let arr = list3.map((e) => ({ value: e.aid, label: e.aname,leaf:true }));
              resolve(arr);
            });
          }
        },
      },
    };
  },

注意將let that = this;這行程式碼儲存一下this指向,要不然訪問不到方法
leaf:true代表是最後一級

頁面程式碼

 <el-cascader v-model="form.place" :props="props"></el-cascader>