欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

elementUI实现级联选择器

时间:2022-06-28 09:17:47|栏目:vue|点击:

本文实例为大家分享了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中控制mock在开发环境使用,在生产环境禁用方式

栏    目:vue

下一篇:Vue-Element-Admin前端接入SSO的方法步骤

本文标题:elementUI实现级联选择器

本文地址:http://www.codeinn.net/misctech/206186.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有