关于elementUI下拉框value和label问题

关于elementUI下拉框回显value而不是label问题

今天使用elementUI中的下拉模板时发现了一个很大的坑，根据文档所介绍的是：
key唯一标识
label选择之后显示到选择框中的值
value 选中之后绑定给模型层的值

<el-select v-model="department.manager" placeholder="请选择"><el-optionv-for="item in employees":key="item.id":label="item.username":value="item"><span style="float: left">{{ item.username }}</span><span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span></el-option>
</el-select>

但跑起来好像并不是这么一回事label并没有显示到选择框中。

然后我又微调了一下代码将v-model中的值修改了回显问题解决了，但是选择后的显示问题依旧，我猜测和value有关。将value中的值修改成:value=“item.username”，选择和回显问题就解决了

<el-select v-model="department.manager.username" placeholder="请选择"><el-optionv-for="item in employees":key="item.id":label="item.username":value="item.username"><span style="float: left">{{ item.username }}</span><span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span></el-option>
</el-select>

这个时候我意识到这和elementUI官网所说的不一致呀。并且提交表单后传入后台的数据只有manager.username是正确的 id仍然是回显的id，没有实现一个修改的效果，网上也给出了一些解决方法，但都达不到效果。
苦思冥想之后（其实就是百度了又百度之后）。发现问题出在value绑定到模型层处，绑定对象给模型层的时候一定要加value-key=“id”，最终代码修改成如下

<el-select v-model="department.manager" placeholder="请选择" value-key="id"><el-optionv-for="item in employees":key="item.id":label="item.username":value="item"><span style="float: left">{{ item.username }}</span><span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span></el-option>
</el-select>

又了解了一个大坑的解决方式

关于elementUI下拉框value和label问题相关推荐

ElementUI下拉框选择后不显示值
文章目录方法一方法二问题:vue(ElementUI)下拉框选择后赋值了,但是框上不显示  <el-form-item label="用户角色&q ...
elementui下拉框默认选中第一个的方法
1.用elementui画下拉框. <el-form-item label="活动区域"><el-select v-model="form.region ...
elementui下拉框清空_巧妙解决element-ui下拉框选项过多的问题
1. 场景描述不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好用人会说element-ui的select有一 ...
巧妙解决element-ui下拉框选项过多的问题
1. 场景描述不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好用人会说element-ui的select有一 ...
elementui 下拉框回显_element-ui 中el-select表单不回显和校验不通过的问题
项目中有一个需求,填写表单,有两个相关联的下拉框,要根据部门筛选部门内的人员当部门切换时,清空负责人里的内容一开始的写法 v-for="(item,i) in getDepartment ...
element-ui下拉框使用value绑定id
因为在这里是先显示label在显示value所以可以把名字写在label里,把id写在value里,然后v-model绑定的值即为value里的id值,且在@change里面可以使用value即id. ...
elementUI 下拉框实现隐藏时触发相关事件
el-select 下拉框隐藏时触发相关事件 =>@visible-change 设置额外的class,=> popper-class @visible-change="chan ...
elementui下拉框选择图片_Element-UI中Select选择器详解
image 前言最近开发的后台管理系统项目采用Vue+Element-UI技术架构,在使用Elment-UI中Select组件的时候遇到了比较多的操作难题,官网上关于这个组件的使用文档介绍的不是很详 ...
elementui下拉框选择图片_element ui下拉框如何实现默认选择?
为什么我这样写没反应呢运营商级别 <el-option v-for="item in options1" :label="item.label" :va ...

关于elementUI下拉框value和label问题

关于elementUI下拉框回显value而不是label问题

关于elementUI下拉框value和label问题相关推荐

最新文章

热门文章