广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >elementUI实现级联选择器
  • 128
分享到

elementUI实现级联选择器

2024-04-02 19:04:59 128人浏览 薄情痞子
摘要

本文实例为大家分享了elementUI实现级联选择器的具体代码,供大家参考,具体内容如下 1、从后端调用接口,传递数据到前端 2、使用Vue代码显示级联选项 <el-ca

本文实例为大家分享了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、显示效果如下

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

--结束END--

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

本文链接: https://www.lsjlt.com/news/156823.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • elementUI实现级联选择器
    本文实例为大家分享了elementUI实现级联选择器的具体代码,供大家参考,具体内容如下 1、从后端调用接口,传递数据到前端 2、使用VUE代码显示级联选项 <el-ca...
    99+
    2022-11-12
  • elementui中的el-cascader级联选择器的实践
    目录一、效果 二、主要代码一、效果 功能:使用接口调回来的数据,显示出可选的项,并开始有默认的选项值。 二、主要代码 <el-cascader ref="cascad...
    99+
    2022-11-12
  • 利用级联选择器实现省市区三级联动【vue + elementUI Plus | uViewUI】
    文章目录 准备数据vue + ElementUI Plus 利用级联选择器实现省市区三级联动学习记录具体代码 vue + uViewUI 利用选择器多列联动实现省市区三级联动 (uniapp学习记录具体代码 准备数据 ...
    99+
    2023-08-19
    vue.js elementui javascript 小程序 前端
  • vue ElementUI级联选择器回显问题解决
    目录1. 分析问题2. 解决问题1. 分析问题 【问题描述】 使用 ElementUI 的 Cascader 级联选择器组件,如果使用了懒加载和动态加载数据会导致,在v-model中...
    99+
    2022-11-13
  • vue怎么实现级联选择器
    本篇内容主要讲解“vue怎么实现级联选择器”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么实现级联选择器”吧!基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联web开发中我...
    99+
    2023-07-04
  • elementui动态级联选择器回显问题怎么解决
    这篇文章主要讲解了“elementui动态级联选择器回显问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“elementui动态级联选择器回显问题怎么解决”吧!场景描述后台返回类目数...
    99+
    2023-07-05
  • element UI怎么实现级联选择器
    本篇内容介绍了“element UI怎么实现级联选择器”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!从后端调用接口,传递数据到前端使用VUE...
    99+
    2023-06-25
  • 如何使用vue2.0实现级联选择器
    小编给大家分享一下如何使用vue2.0实现级联选择器,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联web开发中我们经常会遇到级...
    99+
    2022-10-19
  • jquery如何实现treeview的级联选择
    这篇文章给大家分享的是有关jquery如何实现treeview的级联选择的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   jquery.treeview的使...
    99+
    2022-10-19
  • vue实现省市区的级联选择
    最近要实现一个省市区级联选择效果,省市区的数据都是使用的本地数据,实现起来逻辑会有一点复杂,我在这里列举PC端的总结分享一下,移动端的代码也是差不多的,除了html之外,其它的可以复...
    99+
    2022-11-12
  • js实现简单省市区三级选择联级
    本文实例为大家分享了js实现省市区三级选择联级的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"&g...
    99+
    2022-11-12
  • ElementUI日期选择器时间选择范围限制的实现
    目录单个输入框的情景1: 设置选择今天以及今天之后的日期情景2: 设置选择今天以及今天以前的日期情景3: 设置选择今天之后的日期(不能选择当天时间)两个输入框情景1: 限制结束日期不...
    99+
    2022-11-13
  • ElementUI年份范围选择器功能实现
    目录ElementUI 年份范围选择器实现效果依赖组件代码调用组件代码总结ElementUI 年份范围选择器 Element的日期选择器组件没有提供选择年份范围的功能。由于项目需要,...
    99+
    2023-02-10
    elementui日期选择器范围 element选择年度范围 element日期选择器
  • Vue实现省市区级联下拉选择框
    本文实例为大家分享了Vue实现省市区级联下拉选择框的具体代码,供大家参考,具体内容如下 以(Vue下拉选择框Select组件二)为基础实现省市区级联下拉选择框组件 (业务需...
    99+
    2022-11-13
  • 前端elementUI select选择器实现远程搜索
    目录elementUI select选择器远程搜索测试背景菜鸟用法官方参考elementUI select选择器远程搜索 测试背景 先提下背景:就是在测试的过程中,经常需要用到收货这...
    99+
    2022-11-13
  • vue实现联动选择
    本文实例为大家分享了vue实现联动选择的具体代码,供大家参考,具体内容如下 因为项目需求,作者和作者头像都是由后台接口传给前端的,所以我就选择用select来实现主要想法就是当选择作...
    99+
    2022-11-13
  • Vue如何实现省市区级联下拉选择框
    这篇文章将为大家详细讲解有关Vue如何实现省市区级联下拉选择框,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下以(Vue下拉选择框Select组件二)为基础实现省市区级联下拉选择框组件...
    99+
    2023-06-29
  • 使用JavaScript怎么实现一个省市区三级选择联级
    这期内容当中小编将会给大家带来有关使用JavaScript怎么实现一个省市区三级选择联级,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。JavaScript可以做什么1.可以使网页具有交互性,例如响应用户点...
    99+
    2023-06-14
  • 前端elementUI select选择器怎么实现远程搜索
    这篇文章主要介绍“前端elementUI select选择器怎么实现远程搜索”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“前端elementUI select选择器怎么实现远程搜...
    99+
    2023-06-30
  • 实现微信小程序中的多级联动选择器效果
    实现微信小程序中的多级联动选择器效果,需要具体代码示例随着微信小程序的普及和发展,越来越多的开发者开始关注小程序的开发技巧和实现效果。其中,多级联动选择器是小程序中常见的一种选择器效果,能够提供良好的用户体验和交互效果。本文将介绍如何在微信...
    99+
    2023-11-21
    微信小程序 选择器 多级联动
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作