element-ui 中 Cascader 级联选择器同时获取value值和label值

最新推荐文章于 2024-06-27 15:47:20 发布
最新推荐文章于 2024-06-27 15:47:20 发布
阅读量7.8k 收藏 6
点赞数 4
分类专栏： element-ui 文章标签： element-ui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28252421/article/details/97367011
版权
  • 给Cascader 级联选择器添加一个别名
<el-cascader :options="options" ref="myCascader"></el-cascader>
  • 选择完毕之后可以通过别名获取
let labelValue = this.$refs['myCascader'].inputValue

当然，element-ui在一直更新变化，label值的字段可能不会一直是inputValue，如果通过inputValue无法获取，大家 console 一下基本就可以找到是哪个字段了。

console.log(this.$refs['myCascader'])
百里青山
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
element 的 el-cascade 组件如何获取级联选中所有的label和value值
Fluoxetine的博客
09-13 369
cascade 获取整个🌲的值
Element-ui Cascader 级联选择器 同时返回 value 和 label
明日晴空的博客
02-20 3818
1、给 cascader 组件赋值一个别名 &lt;el-cascader ref="cascaderAddr" @change="change"&gt; &lt;/el-cascader&gt;   2、然后我们就可以通过 currentLabels 来获取 cascader 组件中的 label 了 change(item) {     console.log(item, this....
el-cascader 级联选择器 同时获取到value和label
最新发布
szzlh123456789的博客
06-27 150
【代码】el-cascader 级联选择器 同时获取到value和label。
element-ui cascader级联选择器 同时返回value和label
u013746071的专栏
01-22 9622
1.给cascader组件赋值一个别名 2 通过 currentLabels 来获取cascader组件中的label
vue使用element-ui的cascader，value和label为后台返回的值，并获取选中的value和label值
qq_29124867的博客
01-10 7268
在使用element-ui组件库的cascader级联选择器组件时，我们发现组件默认的数据结构是label为键名，value为键值，但通常后端返回的数据键值并不是value和label，就需要我们通过props属性label和value进行自定义。 1、从后台返回的数据结构 expenseList: [ { expenseId: 1, expenseItem: '运输费-1', child: [ expenseId: 11, expenseItem: '运输费-2
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
`<el-cascader>`是Element-UI用于创建级联选择器的组件。在示例代码中，我们看到`v-model`绑定到`ruleForm.censusLand`，这使得菜单选择的值可以双向绑定到数据模型。级联菜单的配置项包括`placeholder`（占位提示）...
Element Cascader 级联选择器的使用示例
10-15
在级联选择器中，`v-model` 绑定的 `value` 是用户选定的值，它是一个数组，通常包含了用户选择的每一级的值。 2. **options**：这是一个包含所有选项的数据对象，每个选项都有 `value` 和 `label` 属性，分别代表...
详解关于element级联选择器数据回显问题
10-17
在给定的代码段中，我们看到一个基于 Element UI 的级联选择器（Cascader）用于选择部门名称。级联选择器的属性配置包括 `placeholder`、`:props`、`:options`、`filterable`、`change-on-select` 和 `v-model`。...
基于Element的组件改造的树形选择器(树形下拉框)
10-15
在本文中，我们将深入探讨如何基于Element UI框架进行组件改造，特别是创建一个树形选择器（树形下拉框）。Element UI 是一个流行的 Vue.js UI 框架，提供了许多开箱即用的组件，如 el-select 和 el-tree。然而，在...
详解Vue、element-ui、axios实现省市区三级联动
11-30
在本文中，我们将深入探讨如何使用Vue.js、Element UI和Axios实现省市区三级联动功能。这个功能在很多电商网站和应用中都是必不可少的，它允许用户或管理员选择和设置具体的地理位置信息。以下是对实现这一功能的...
element-ui中cascader同时获取label和value值
weixin_34281537的博客
11-16 9252
关于elementUI中cascader选中值后，能获取value或者label，但不能同时获value和label，这一问题，琢磨出了这么个办法。以新增和编辑城市为例，type: 1 编辑，type: 0 新增 1. 配置元素 <el-cascader filterable :class="{'city-cascader': ...
el-cascader使用props设置value、label、children
liulubo520的博客
04-09 7863
我们用el-cascader时候element官网给的数据是如图 我们的数据是这样的 下面就来交大家怎么修改 我们修改之前要先了解props属性的使用 前端代码： <el-cascader :options="cityList" //你获取到的数据 :props="optionProps"//看下面代码 v-model="selectedOptions" ...
vue项目 关于Elemet-ui组件Cascader中proper的配置问题和获取value和lable的值以及清空Cascader的值
weixin_39277183的博客
04-14 718
关于Elemet-ui组件Cascader中proper的配置问题 最近项目需要做一个多联动的select，但是后台返回来的数据和ele参考的结果有些不一样 ele提供参考的结构，例子没有 具体说明那个如何去传写数据，具体要看props配置文件 这是后台返回来的结构，我现在就不用真实数据进行展示 结构代码： <el-cascader placeholder...
【vue 项目】有关cascader任选一级、字段名不同、同时获取value和label值、回显（推父节点）等问题解决
Aohanzzz的博客
10-25 3969
有关cascader的一些用法
element-plus中的Cascader 级联选择器,使用tooltip组件预览内容
06-10
对于element-plus中的Cascader级联选择器，使用Tooltip组件预览内容可以如下实现： 首先，在需要展示Tooltip的地方，使用`el-tooltip`组件包裹需要预览的内容，设置`content`属性为预览的内容，`disabled`属性为false（默认为true，需要手动设置为false才能生效），`effect`属性为`dark`或者`light`（根据UI风格选择），其余属性可根据需求自行设置。 然后，在Cascader组件上，使用`slot-scope`自定义模板，在需要展示的地方，使用`el-tooltip`组件包裹需要预览的内容，设置`content`属性为预览的内容，`disabled`属性为false（默认为true，需要手动设置为false才能生效），`effect`属性为`dark`或者`light`（根据UI风格选择），其余属性可根据需求自行设置。 示例代码如下： ```html <template> <el-cascader v-model="selectedOptions" :options="options" :props="props" @change="handleChange" :filterable="true" :clearable="true" :show-all-levels="false" :expand-trigger="expandTrigger" :change-on-select="changeOnSelect" > <template #default="{ labels, selectedOptions }"> <el-tooltip class="item" effect="dark" :disabled="!labels || labels.length === 0" :content="labels.join(' / ')" > <span class="el-cascader__label">{{ labels[labels.length - 1] }}</span> </el-tooltip> </template> <template #expand="{ index, data }"> <el-tooltip v-for="item in data" :key="item.value" class="item" effect="light" :content="item.label" :disabled="!item.label" > <span class="el-cascader-menu__item" @click="handleItemClick(index, item)"> {{ item.label }} </span> </el-tooltip> </template> </el-cascader> </template> ``` 注意事项： 1. `el-tooltip`组件必须设置`disabled`属性为`false`，否则会导致搜索框无法输入。 2. `el-tooltip`组件的`content`属性可以为任何类型的值，可以是字符串、数字、HTML标签等。 3. `el-tooltip`组件的`effect`属性可选值有`dark`和`light`，根据UI风格选择。 4. `el-cascader`组件的`expand-trigger`属性可选值有`click`和`hover`，根据需求选择。 5. `el-cascader`组件的`change-on-select`属性可选值有`true`和`false`，根据需求选择。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值