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、显示效果如下

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

赞 (0)

相关推荐

  • Vue+ElementUI 中级联选择器Bug问题的解决

    最近在项目中需要用到级联这么个控件,所以便去element上找了个,发现了个问题,在这里跟大家分享下,介于公司项目的隐私性,所以一些文字便给大家打上马赛克了,敬请谅解~ 不多说废话,直接上问题: ElemenUI的级联是通过子级字段递归进行显示的,但是假如后端老铁也用了递归写的数据,而递归到最后一个数据集便出现了问题,会出现光有字段,但是却没有数据这么个情况在这里插入图片描述 这时候就出现了问题: 最后一级会多出来一个级联,这种体验便造成了很不好的感觉. 解决办法: 将获取这些级联的数据作为参数

  • elementui中的el-cascader级联选择器的实践

    elementui中的el-cascader级联选择器的实践

    目录 一.效果 二.主要代码 一.效果 功能:使用接口调回来的数据,显示出可选的项,并开始有默认的选项值. 二.主要代码 <el-cascader ref="cascaderAddr" :options="rangeArr" :props="optionProps" v-model="plable" @change="handleChange3" style="width: 100%;&qu

  • elementUI实现级联选择器

    elementUI实现级联选择器

    本文实例为大家分享了elementUI实现级联选择器的具体代码,供大家参考,具体内容如下 1.从后端调用接口,传递数据到前端 2.使用VUE代码显示级联选项 <el-cascader :disabled="isDisabled" :props="defaultParams" :options="options" v-model="selectedOptions" :show-all-levels="false&

  • vue ElementUI级联选择器回显问题解决

    目录 1. 分析问题 2. 解决问题 1. 分析问题 [问题描述] 使用 ElementUI 的 Cascader 级联选择器组件,如果使用了懒加载和动态加载数据会导致,在v-model中的数据据重新放到 Cascader 级联组建后,会出现数据不回显的问题. [原因分析] 在级联组件中虽然在v-model中重新传入选中的数据,但采用了懒加载+远程数据的方式构建选项数据,此时级联组件的结构数据并未生成,此时仅有选中后的数据而没有选项数据,因此导致了级联选择器没有数据可供显示,也就导致了数据不回显

  • 基于vue2.0实现的级联选择器

    基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联 web开发中我们经常会遇到级联选择器的问题,尤其是在表单中,无外乎几种情况: 单个级联 (下拉选择框,单选) 单个级联 (多项选择) 二级联动 (省份和城市联动) 三级联动 (省市区联动) 在jquery中有很多好用的插件,比如select2, 单选,多选的功能都具备. 本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数

  • vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.

  • Android 中TeaPickerView数据级联选择器功能的实例代码

    Github地址 YangsBryant/TeaPickerView (Github排版比较好,建议进入这里查看详情,如果觉得好,点个star吧!) 引入module allprojects { repositories { google() jcenter() maven { url 'https://www.jitpack.io' } } } implementation 'com.github.YangsBryant:TeaPickerView:1.0.2' 主要代码 public cla

  • 详解关于element级联选择器数据回显问题

    element级联选择器数据回显问题 对于前端小菜鸡来说,被这个问题也是困扰了好久.也是百度的方法. 表单部分代码: <el-form-item label="部门名称:" prop="deptId"> <el-cascader placeholder="请选择部门" :props="depShowType" :options="deptData" filterable change-on

  • Element Cascader 级联选择器的使用示例

    组件-级联选择器 基础用法 <div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader> </

  • 浅谈Vue使用Cascader级联选择器数据回显中的坑

    业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问题如下: 1.由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据: 2.提前加载数据后,点击相应父级节点出现数据重复等: 3.使用多个数据源相同的级联选择器,产生只能成功响应一个加载子级节点数据: 4.Vue中级联选择器相应数据完成加载,依

随机推荐