elementui 级联选择器懒加载获取动态数据

最新推荐文章于 2025-03-08 23:24:13 发布

小童同学呀

最新推荐文章于 2025-03-08 23:24:13 发布

阅读量3.2k

点赞数 5

分类专栏：前端知识文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_38514863/article/details/126726969

版权

前端知识专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用Element UI的级联选择器组件，包括设置选项数据、监听change事件获取选中值、通过ref获取额外信息以及如何配置props属性以处理不同字段名的数据。此外，还展示了如何实现懒加载和后端数据的动态加载，通过typeEconomyGetSelectList方法处理后端返回的数据，并提供了一个解决属性名不匹配的示例。

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

<el-cascader
      v-model="options"
      @change="test"
      :options="optionsOptions"
    ></el-cascader>

elementui 可以通过options属性指定选项数组即可渲染出一个级联选择器；在data里面声明一个变量为数组，显示效果便如下图；

optionsOptions: [
        { value: 1, label: "111", children: [{ value: 3, label: "333" }] },
        { value: 2, label: "222" },
      ],

当你选中之后会调用change事件；返回值为你选中节点value值组成的数组。

但是当你需要拿到选中的节点除了value值以外其他的值时，比如说label啊，或者是你自定义的值；比如像这样想拿到a的值的话；

你可以给el-cascader添加一个ref值

 <el-cascader
     ref="cascader"
      v-model="options"
      @change="test"
      :options="optionsOptions"
    ></el-cascader>

然后通过组件的getCheckedNodes方法来获取你所需要的值；

test(val) {
      console.log(val)
      console.log(this.$refs["cascader"].getCheckedNodes()); 
    },

因为options数据只能识别到value/label/children属性，如果后端返回的数据属性名与组件不一致时，你便需要添加props进行属性名配置；

optionsOptions: [
        // { value: 1, label: "111",a:'a', children: [{ value: 3, label: "333" ,a:'b'}] },
        // { value: 2, label: "222",a:'c' },
        {id:1,label:'111',child:[{id:3,label:'333'}]},
        {id:2,label:'222'}
      ],

<el-cascader
     ref="cascader"
      v-model="options"
      @change="test"
      :options="optionsOptions"
      :props="prop"
    ></el-cascader>

prop:{
          value:'id',
          children:'child'
      },

开启懒加载/加载后端数据

props: {
        //开启懒加载
        lazy: true,
        lazyLoad: this.typeEconomyGetSelectList,
      },

typeEconomyGetSelectList(node, resolve) {
      console.log(node);
      let params = {
        
      };
      typeEconomyGetSelectList(params).then((res) => {
        var nodes = res.data.map((item) => {
          return {
            value: item.value,
            label: item.label,
            haveChildren: item.haveChildren,
            level: item.level,
            leaf: !item.haveChildren,
          };
        });
        resolve(nodes);
      });

后端调用方法再根据你的需求进行修改就行，return的数据都可以在node参数里面的data属性里面获取；value和label必须返回，其余的参数可根据项目需求更改，leaf可以根据级别或者别的参数进行层数的判断。