elementUI实现级联选择器

 更新时间:2021年11月09日 11:45:57   作者:仓央1143  
这篇文章主要为大家详细介绍了elementUI实现级联选择器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了elementUI实现级联选择器的具体代码,供大家参考,具体内容如下

1、从后端调用接口,传递数据到前端

2、使用VUE代码显示级联选项

<el-cascader
        :disabled="isDisabled"
        :props="defaultParams"
        :options="options"
        v-model="selectedOptions"
        :show-all-levels="false"
        filterable
        :clearable="true"
      ></el-cascader>

3、定义JS

data() {
   options: [],
      selectedOptions: [],
      defaultParams: {
        label: "name",
        value: "code",
        children: "children",
      },
},
created() {
 listArea(330000).then((response) => {
       console.log(response);
       this.options = this.getTreeData(response);
       this.loading = false;
     });
},
methods: {
 // 递归消除空数组
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组,则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组,则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    }
}

4、显示效果如下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue+Element UI实现下拉菜单的封装

    Vue+Element UI实现下拉菜单的封装

    这篇文章主要为大家详细介绍了Vue+Element UI实现下拉菜单的封装代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 解决Vue项目中Emitted value instead of an instance of Error问题

    解决Vue项目中Emitted value instead of an 

    这篇文章主要介绍了解决Vue项目中Emitted value instead of an instance of Error问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue之Computed依赖收集与更新原理分析

    Vue之Computed依赖收集与更新原理分析

    这篇文章主要介绍了Vue之Computed依赖收集与更新原理分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue better scroll 无法滚动的解决方法

    vue better scroll 无法滚动的解决方法

    better scroll可以实现轮播图和页面滚动,是移动端滚动插件,这篇文章主要介绍了vue better scroll 无法滚动的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • vue项目如何实现Echarts在label中获取点击事件

    vue项目如何实现Echarts在label中获取点击事件

    这篇文章主要介绍了vue项目如何实现Echarts在label中获取点击事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 关于前端报“应为声明或语句。ts(1128)“的原因及解决方案

    关于前端报“应为声明或语句。ts(1128)“的原因及解决方案

    最近在学习中遇到了个不常见的报错,这里给大家总结下解决的办法,这篇文章主要给大家介绍了关于前端报“应为声明或语句,ts(1128)“的原因及解决方案,需要的朋友可以参考下
    2024-08-08
  • vue3获取当前路由地址

    vue3获取当前路由地址

    本文详细讲解了vue3获取当前路由地址的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-01-01
  • 详解vuex commit保存数据技巧

    详解vuex commit保存数据技巧

    这篇文章主要介绍了详解vuex commit保存数据技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue使用axios引起的后台session不同操作

    Vue使用axios引起的后台session不同操作

    这篇文章主要介绍了Vue使用axios引起的后台session不同操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 实时通信Socket io的使用示例详解

    实时通信Socket io的使用示例详解

    这篇文章主要为大家介绍了实时通信Socket io的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11

最新评论