vue3 + element plus 省市区

最新推荐文章于 2024-05-07 17:14:34 发布

L、yan

最新推荐文章于 2024-05-07 17:14:34 发布

阅读量224

点赞数

文章标签： vue.js javascript 前端 html elementui

本文链接：https://blog.csdn.net/weixin_45966782/article/details/132064864

版权

文章详细描述了如何在Vue应用中使用`el-cascader`组件实现地址选择的多级联动功能，涉及懒加载策略和数据处理方法。

摘要由CSDN通过智能技术生成

<el-cascader
            placeholder="请选择公司地址"
            :props="address.props"
            v-model="address.value"
            style="width: 240px"
            @change="selectCascader"
          ></el-cascader>


const address = reactive({
  value: [], // 多级联动的值 => 会是一个数组
  cascaderVal: [],
  props: {
    lazy: true,
    lazyLoad: (node, resolve) => {
      // node 节点数据 node.value => 当前节点的值
      // level: 层级 => 1,2,3,4
      const { level } = node;
      // 动态节点
      const nodes = [];
      if (level == 0) {
        selectProvinceList({}).then((res) => {
          res.data.map((item) => {
            //按照官方字段赋值
            let obj = {
              value: item.code,
              label: item.name,
              leaf: node.level >= 1,
            };
            nodes.push(obj);
          });
          //  resolve 节点返回
          resolve(nodes);
        });
      } else if (level == 1) {
        selectselectCityList({ provinceCode: node.value }, {}).then((res) => {
          res.data.map((item) => {
            let obj = {
              value: item.code,
              label: item.name,
              leaf: node.level >= 2,
            };
            nodes.push(obj);
          });
          //  resolve 节点返回
          resolve(nodes);
        });
      } else if (level == 2) {
        selectselectDistrictList({ cityCode: node.value }, {}).then((res) => {
          res.data.map((item) => {
            let obj = {
              value: item.code,
              label: item.name,
              leaf: node.level >= 2,
            };
            nodes.push(obj);
          });
          console.log(nodes,'==========')
          //  resolve 节点返回
          resolve(nodes);
        });
      }
    },
  },
});



回显
address.value = res.data.locationArray