Element使用级联选择器

已于 2023-06-17 18:19:41 修改
阅读量5.8k 收藏 9
点赞数 5
分类专栏： vue 文章标签： elementui vue.js javascript
于 2022-04-22 16:35:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45516282/article/details/124348679
版权
本文介绍了在使用Element UI的级联选择器时遇到的问题，即接口返回的数据格式与组件要求的不匹配。通过分析，发现级联选择器需要严格符合有value、label和children的数据结构。为解决这个问题，采取了使用JavaScript的map方法来转换数据，将接口返回的id和name映射到value和label上，从而成功地实现了数据绑定并达到预期效果。
摘要由CSDN通过智能技术生成

Element使用级联选择器

element的级联选择器和select不一样，下拉框我们可以手动定义label和value，只需要将查出来的值循环一下即可

在这里插入图片描述

但是级联选择器的视图层是这样的

在这里插入图片描述

只有 :options=“options” 这个属性让我们绑定值，没办法绑定他的label和value

element官网给的数据结构是这样的
在这里插入图片描述

就是严格的有value和label，下面有children，children里面也有value和lebel
但是我们接口传过来的数据一般是这样的

在这里插入图片描述

这样就很难，级联选择器根本匹配不上，结果是这样的

最低0.47元/天 解锁文章
程序员小雨
关注
专栏目录
element-UI级联选择器
Bubu_Niao的博客
11-30 285
element-UI级联选择器默认选择是value[id]想要获取label[name值] <el-cascader v-model=“form.sampleName” :options=“options” :show-all-levels=“false” ref=“sampleAddr” @change=“handleChange” placeholder="***" :style="{width: ‘100%’}"> methods: { /***/ handleChange(item
element 级联选择器
weCat_s的博客
03-18 208
template 结构 <el-form-item label="客户需求：" prop="customerRequire" class="content-customerRequire common-style" ><el-cascader ref="requirementRef" v-model="ruleForms.customerRequire" place
vue2+Element-ui中使用级联选择器选择地区
最新发布
cygqtt的博客
07-18 1297
vue2+Element-ui中使用级联选择器选择地区
ElementUI Form：Cascader 级联选择器
ChinaDragon10的博客
02-17 1594
ElementUI Form：Cascader 级联选择器
【Element】el-cascader 级联选择器
joanmelon的博客
08-07 648
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
详解关于element级联选择器数据回显问题
10-17
本文将详细探讨 Element 级联选择器的数据回显问题及其解决方案。 首先，让我们看看问题的背景。在给定的代码段中，我们看到一个基于 Element UI 的级联选择器（Cascader）用于选择部门名称。级联选择器的属性配置...
Element Cascader 级联选择器的使用示例
12-28
组件—级联选择器 基础用法 默认 click 触发子菜单 options=options change=handleChange> <span class=demonstration>hover 触发子菜单 <el-cascader v-model=value :options=
elementUI级联选项器
weixin_52234593的博客
06-11 1166
elementUI级联选项器的数据处理
elementUI-级联选择
weixin_49302285的博客
10-19 862
【代码】elementUI-级联选择。
elementui 级联选择器的用法
codercjw的博客
01-11 4221
级联选择器
element Cascader 级联选择器
weixin_44286765的博客
09-27 132
<el-cascader class=“coed” :options=“optionsadds” v-model=“areacodesearch” :props="{ checkStrictly: true , value: ‘value’, label: ‘label’,}" placeholder="请选择行政区域" @change="setCode" :popper-class="setClass" ></el-cascader> /setCode() { if
element-ui级联选择器
weixin_71902686的博客
04-03 341
当数据里children为空数组 , 需要将其属性删除 , 禁止选项需要在数据里加上disabled=true , 考虑本次数据是对象里children里有对象 , 对象还有数组的嵌套循环 , 为完成以上两种功能 , 采用了递归,代码如下。//如果数据里有children属性且children不为空,继续对children进行递归查找。:props="defaultProps"//配置数据选项,这里可指定节点标签内属性是数据的某一项。:options="meunList"//关联的数据。
elementui Cascader 级联选择使用心得
codingLeader的博客
08-05 4241
Element cascader遇到的问题
Element中的日期时间选择器DateTimePicker和级联选择器Cascader
weixin_65793170的博客
07-01 833
一. 级联选择器，Cascader。二. 日期时间选择器，DateTimePicker
ElementUI自定义级联选择器
Domain_2022的博客
01-14 918
首先我们要了解级联选择器options数据结构options数组包含value(值),label(值),children(数组)value指定选项的值为选项对象的某个属性值label指定选项标签为选项对象的某个属性值children指定选项的子选项为选项对象的某个属性值我们建表应设置三个字段,value(主键),label,parent_value(外键)自定义模拟数据库已上传/***/@Data/*** 商铺id*//*** 商铺名称*///变动。
elementUI——级联选择器（el-el-cascader）
热门推荐
Tyche_ya的博客
05-07 1万+
1、需要实现的需求: 后端返回所有数据的数组，根据数组显示一级二级单位。 数组样子： 1）先在el-form中加上 <el-cascader style="font-size: 14px;" placeholder="类目搜索：请输入类目名称" //配置选项 :props="defaultParams" :options="options" v-model="addShopName" ref="cascaderAddr" @change="splitChange"
element UI Cascader 级联选择器 动态加载
zfq444518878的博客
04-28 1586
先看下效果图 直接上代码 div部分 data部分 methods代码部分 // 获取省 getProvence(_this, param) { this.$api.AreaAddress(_this, param).then(res => { //你的接口 this.provenceArray = res.data; //赋值给provenceArray this.prov...
element的级联选择器
09-13
Element的级联选择器是一种CSS选择器，用于选择相应的HTML元素。它通过多个选择器的组合，以实现更精确的元素选择。 级联选择器使用空格来连接不同的选择器，表示选择器之间的嵌套关系。下面是一个示例： ```css .parent .child { /* 样式规则 */ } ``` 在上面的例子中，`.parent .child` 表示选择class为 `child` 的元素，它必须是 `.parent` 元素下的子元素。 你可以根据需要添加更多的选择器，以实现更深层次的级联选择。例如： ```css .grandparent .parent .child { /* 样式规则 */ } ``` 在上面的例子中，`.grandparent .parent .child` 表示选择class为 `child` 的元素，它必须是 `.parent` 元素下的子元素，而 `.parent` 元素又必须是 `.grandparent` 元素下的子元素。 通过使用级联选择器，你可以选择到更具体的元素，从而应用特定的样式规则。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值