Element UI 级联选择器的动态加载用法

最新推荐文章于 2024-08-19 11:35:24 发布

前端Kirk

最新推荐文章于 2024-08-19 11:35:24 发布

阅读量1.8k

点赞数 3

文章标签： vue elementui javascript vue.js

本文链接：https://blog.csdn.net/qq_44146665/article/details/109462133

版权

Element UI 级联选择器的动态加载用法

html 部分

         <el-cascader
          size="mini"
          clearable
          placeholder="请选择地址"
          @change="cascaderChange"
          v-model="searchForm.detailAddress"
          :props="cascaderProps"
        ></el-cascader>

js部分 getAreaDict() 是数据源接口调用
数据格式如图，也可以是其他格式，视情况而定

 cascaderProps: {
        label: "name",
        value: "code",
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            if (node.level == 0) {
              //省
              getAreaDict().then((res) => {
                const cities = res.data.data.filter((item) => {
                  return item.level == "1";
                });
                resolve(cities);
              });
            }
            if (node.level == 1) {
              //市
              let a = node.value.substring(0, 2);
              getAreaDict().then((res) => {
                const cities = res.data.data.filter((item) => {
                  return item.level == "2" && item.code.substring(0, 2) == a;
                });
                resolve(cities);
              });
            }
            if (node.level == 2) {
              //区或县
              let a = node.value.substring(0, 4);
              getAreaDict().then((res) => {
                const cities = res.data.data.filter((item) => {
                  return item.level == "3" && item.code.substring(0, 4) == a;
                });
                cities.map((item) => {
                  item.leaf = true;
                  return item;
                });
                resolve(cities);
              });
            } else if (node.level > 2) {
              resolve([]);
            }
          }, 100);
        },
      }