el-ment 下拉选择框key 绑定多个值

原创 已于 2023-03-17 11:14:47 修改 · 464 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #elementui #vue.js

于 2023-03-17 10:33:51 首次发布
这个代码段展示了如何在Vue.js中使用el-select组件来创建一个可过滤的下拉选择框，其中v-model绑定到query.amessagetype，value-key设为aid，并遍历messageTypeList来生成选项。每个选项的key是item.aid+item.aname+-only，标签显示item.aname，选项值为item对象。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<el-select v-model="query.amessagetype" filterable value-key="aid" >
  <el-option
          v-for="item in messageTypeList"
          :key="item.aid+item.aname+'-only'"
          :label="item.aname"
          :value="item">
  </el-option>  
</el-select>

案例说明：vue中Element UI下拉列表el-option中的key、value、label含义各是什么
m0_56991207的博客
07-08 1万+
Element UI下拉列表el-option中的key、value、label含义 前端展示： 而我们注册用户信息之后，选择了第四个选项‘西安’，此时数据库中新增的zhangsan信息中，city显示的是‘选项四’，而不是西安。 这是因为：我们在前端代码中将value值写做‘选项X’，此时我们将前端代码中options中做修改： 重新注册wangwu的信息，并选择第四项‘西安’，此时数据库中新增user信息：wangwu的city为‘西安’ 总结:.........
3.写vue遇到的小问题及解决方法。如：一个下拉框绑定两个值传给后端；如何获取el-tree某个子节点的父节点信息；查询的时候传合并后的对象
qq_52999833的博客
03-17 608
问题1 问题描述 如何给一个下拉框绑两个参数，传给后端 解决方法 （1）给el-select 绑定@change="addriskprefimchange"方法 <!-- 这里希望选中下拉框数据，同时给后台传riskpredim 和riskpredimname 其中riskpredim是RiskpredimnameOpions的codecode riskpredimname是RiskpredimnameOpions的codename--> <el-selec
element下拉菜单绑定多个值el-select绑定多值
weixin_38999134的博客
11-10 4597
<!-- 下拉菜单传多个值 --> <el-select v-model="deviceName" filterable :disabled="productdisabled" @change="deviceSelect($event)" ref="deviceName" placeholder="请选择设备"> <el-option v-for="item in d.
Element UI下拉列表el-option中的key、value、label含义
热门推荐
qinqinde123的博客
11-07 1万+
Element UI下拉列表el-option中的key、value、label含义 <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="用户姓名" prop="userId"> <el-select v-model='queryParams.userId' s
el-select 多个下拉循环绑定值的问题
梅花屋
06-11 2626
关于element-ui el-select循环绑定值获取的问题 <span class="levelBox" v-for="(ele,index) in levelList" :key="index"> <el-select filterable v-model="level[index]" @change="changeLevel" :placeholder="'不限'+ele.firstLevelName" clearable> <el-option
element el-tree组件的动态加载、新增、更新节点的实现
10-15
需要注意的是，el-tree 组件还提供了一些其他有用的属性和方法来支持树形控件的操作，例如 :props 属性用于自定义节点中各个字段的 key，node-key 用于指定节点唯一标识的字段，以及 lazy 属性用于配置节点的懒加载...
＜el-option v-for=“item in Option“ :key=“item.“ :label=“item.label“ :value=“item.“＞＜/el-option＞
m0_74830537的博客
01-12 1627
：key代表什么意思？：label和：value代表的意义是什么？冒号：有什么作用？
element ui checkbox-group多选框怎么选中id值
lilyheart的博客
09-01 5418
在项目开发中，使用多选框组，选中时想要取到该项的id而不是label值： checkbox-group：Element ui 中的组件，只需要在 Group 中使用v-model绑定Array类型的变量即可,并且绑定change实践，el-checkbox 的 label属性是该 checkbox 对应的值，所以只要label绑定id就可以了，显示的话使用label； 看代码 <el-checkbox-group v-model="checked" @change="test"> .
element穿梭框的输入框通过对接口返回多个值进行筛选显示
a1120590091的博客
12-23 2152
3实现要求：输入框内容并没有显示在穿梭框的label中 但是可以进行搜索显示 实现过程 1.在穿梭框上设置 :filter-method="filterMethod"方法 <el-transfer v-model="form.hosIds" filterable :props="{ key: 'sourceId', label: 'name', }" :filter-method="filterMethod" :data="hospitalList" :titles="[`${$t('mess
elementUI 的多选框的选中
L_csdn123的博客
01-11 2401
要用elementUI组件写个多选框，要求 要有之前的默认选中，展示的是中文名字，实际传值的时候传的是英文的名字 <el-checkbox-group v-model="form.scopes" // el-checkbox-group上绑定的值就是默认选中的值，这个值有个要求他必须是普通的数组，不能是对象数组那种，他其实是把传的label值放到一个普通数组里，所以他必须和label的值的形式统一，要不然默认选中不会生效的！！！ @change="handleCheckChange"
elementUI下拉选择框动态绑定数据
abc234ABC的博客
03-07 9567
html部分： <el-form-item label="板块"> <el-select v-model="form.plate" placeholder="选择发布板块"> <el-option v-for="plate in plates" :value="plate.plateId" :key="plate.plateId" :label="plate.plateName"></el
elementUI select控件绑定多个值（对象）
A873054267的博客
07-17 1万+
通常使用的时候v-model都是绑定一个值，这样没有问题，但在某些需求中会获取选择项的多个值。 那么v-model就需要绑定一个对象，e饿了么的官网说明了绑定对象的时候必须绑定value-key值，否则会出现选择项无法改变的情况 。value-key可以使用选择项中的值。 当时没有看文档的时候，自己也想了一个办法，就是绑定选择项的索引值，然后到对应的nameList数组中取出对应的项也可以。...
vue select传多个值，传多个值的方法
weixin_38373875的博客
07-05 7149
el-select遍历方法，在el-select中写上@change，如@change=“pickRoleName” <el-select @change="pickRoleName" v-model="ToviewForm.deptId" placeholder="请选择" ...
vue 、 在element-ui的el-table组件中 使用 el-select绑定对象时value-key的注意事项
一撇一画的博客
08-04 1923
// 绑定对象时设置了value-key，再次点击时不会高亮,找了源码发现需要key需要一致； // 相关源码 isEqual(a, b) { if (!this.isObject) { return a === b; } else { const valueKey = this.select.valueKey; return getValueByPath(a, valueKey) === getValueByPath(b, valueKey); } } // ======
element-ui多选框reserve-selection指定row-key保留数据更新之前的数据，及清空保存的数据
wang_bing_bo的博客
09-05 2987
element-UI 的table表格数据有提供多项框的功能,只要在表格列中多加一列就可以选择表格的数据 但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页也就是上一次请求的数据的选中状态就没有了.element提供了reserve-selection可以保存数据更新前选中的值,这个属性还需要指定row-key. 先看下页面的效果: 注意事项: 具体看代码: <el-table :data="tableData6" :row-k
【无标题】Js ＜el-option＞中的value绑定多个值
weixin_46801232的博客
10-19 1599
【无标题】Js 中的value绑定多个值
elementUI单选多选框动态绑定显示内容和绑定值
xiaoqingqing的博客
11-20 5711
elementUI单选多选框动态绑定显示内容和绑定值，挺简单的内容，总是不熟练，小小记录一下。 单选： <!-- 单选框 --> <el-radio-group v-model="regionType"> <el-radio v-for="item in regionTypes" :label="item.label" :key="item.label">{{item.text}}</el-radio>
el-select下拉选择框内容无法滑动
最新发布
03-04
### 解决 el-select 下拉选择框内容不可滚动的问题 当遇到 `el-select` 下拉选择框中的选项列表过长而无法正常滚动的情况时，可以通过调整 CSS 样式来解决问题。具体来说，确保 `.el-scrollbar__wrap` 的样式设置允许其内部的内容能够被正确地滚动。 对于 Element Plus 中的 `el-select` 组件，默认情况下会有一个最大高度以及溢出隐藏属性应用于下拉菜单容器内，这可能会阻止用户查看超出视窗范围的选择项。为了使这些项目可见并能上下移动浏览全部条目，应该确认如下几点： - 确认是否有自定义样式覆盖了默认的最大高度(`max-height`) 和 溢出 (`overflow-y: auto;`) 属性。 如果确实存在冲突，则需移除或修正那些妨碍滚动行为的CSS规则[^1]。 另外一种常见情况是因为浏览器兼容性问题或是特定版本框架本身的 bug 导致此现象发生，在这种情形之下建议升级到最新稳定版库文件，并查阅官方文档获取更多支持信息[^2]。 最后值得注意的是，有时页面布局设计也可能影响组件的表现形式，比如父级元素设置了固定的高度限制或者其他定位方式干扰到了子节点的行为模式。此时应当仔细审查整个 HTML 结构及其关联样式表，寻找潜在的影响因素[^3]。 ```css /* 调整滚动条 */ .el-select-dropdown { max-height: 274px; } .el-select-dropdown__wrap { margin-bottom: -5px; overflow-x: hidden; overflow-y: scroll !important; } ``` 上述代码片段展示了如何强制启用垂直方向上的自动滚动生成器，同时保持水平方向不变形。通过这种方式可以有效改善用户体验，使得即使面对大量数据也能轻松选取所需目标。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值