vue3 element-plus el-cascader 动态加载

最新推荐文章于 2025-03-21 13:46:23 发布

江-月*夜

最新推荐文章于 2025-03-21 13:46:23 发布

阅读量754

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_36529240/article/details/136745540

版权

本文介绍了如何使用Vue框架中的ElementUICascader组件实现动态的2-4级联动，以及利用懒加载策略通过axios从服务器异步获取数据以提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态的目前是做2级联动，可以做成3，4级联动，但是无限级联动有空研究下
1.代码

<template>
  <el-cascader
    :props="data.props"
    v-model="data.value"
    filterable
    clearable
    placeholder="请选择"
    @change="changeArea"
  ></el-cascader>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import axios from "axios";

const data = 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) {
      axios.post('xxx').then((res) => {
          res.data.map((item) => {
            //按照官方字段赋值
            let obj = {
              value: item.id,
              code: item.provinceCode,
              label: item.provinceName,
              leaf: node.level >= 1,
            };
            nodes.push(obj);
          });
          //  resolve 节点返回
          resolve(nodes);
        });
      } else if (level == 1) {
        axios.post('xxx',{ provinceCode: node.data.code }).then((res) => {
          res.data.map((item) => {
            let obj = {
              code: item.cityCode,
              value: item.id,
              label: item.cityName,
              leaf: node.level >= 1,
            };
            nodes.push(obj);
          });
          //  resolve 节点返回
          resolve(nodes);
        });
      }
    },
  },
});
</script>

<style scoped lang="scss"></style>