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解决图片视频加载缓慢/首屏加载白屏的问题

    VUE解决图片视频加载缓慢/首屏加载白屏的问题

    在 Vue3 项目中,有时候会出现图片视频加载缓慢、首屏加载白屏的问题,所以本文小编就给大家详细介绍一下如何解决图片视频加载缓慢/首屏加载白屏的问题,需要的朋友可以参考下
    2023-07-07
  • Vue使用Pinia轻松实现状态管理

    Vue使用Pinia轻松实现状态管理

    pinia,一个基于Vue3的状态管理库,它可以帮助开发人员管理Vue应用程序的状态,本文主要为大家介绍了Pinia的用法,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-06-06
  • 浅谈vuex之mutation和action的基本使用

    浅谈vuex之mutation和action的基本使用

    本篇文章主要介绍了浅谈vuex之mutation和action的基本使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 关于axios不能使用Vue.use()浅析

    关于axios不能使用Vue.use()浅析

    这篇文章主要给大家介绍了关于axios不能使用Vue.use()的相关资料,文中通过示例代码介绍的非常详细,对大家的理解和学习具有一定的参考学习价值,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2018-01-01
  • 详解vue-cli中的ESlint配置文件eslintrc.js

    详解vue-cli中的ESlint配置文件eslintrc.js

    本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue中的this.$emit()方法详解

    Vue中的this.$emit()方法详解

    这篇文章主要给大家介绍了关于Vue中this.$emit()方法的相关资料,this.$emit()是 Vue.js 中一个很有用的方法,可以帮助子组件向父组件传递事件,需要的朋友可以参考下
    2023-09-09
  • vue3中v-model的用法详解

    vue3中v-model的用法详解

    vue 提供了很多自定义指令,大大方便了我们的开发,其中最常用的也就是 v-model,他可以在组件上使用以实现双向绑定。它可以绑定多种数据结构, 今天总结一下用法
    2023-04-04
  • 浅谈Vue组件及组件的注册方法

    浅谈Vue组件及组件的注册方法

    本文主要介绍了浅谈Vue组件及组件的注册方法,详细的介绍了什么是组件,及其组件注册的两种方式(全局和局部),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 使用vxe-table合并单元格后增加选中效果

    使用vxe-table合并单元格后增加选中效果

    这篇文章主要介绍了使用vxe-table合并单元格后增加选中效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue addRoutes路由动态加载操作

    vue addRoutes路由动态加载操作

    这篇文章主要介绍了vue addRoutes路由动态加载操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论