vue中Elment下拉框value传递多个参数并在保存后回显

最新推荐文章于 2024-05-20 13:41:14 发布
最新推荐文章于 2024-05-20 13:41:14 发布
阅读量1.2k 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wind060100/article/details/120161005
版权

在Elment中有一个value-key的参数是我们传递多个参数时，必须要的

 

在给value-key这个参数绑定值时必要要绑定数据中的唯一键          :value中绑定item数据对象，在给el-select定义一个事件事件中将我们绑定给v-modal的值传递过去，v-modal中一定要绑定一个数据对象

 最后methods中的事件里接收一下就可以了

 

最低0.47元/天 解锁文章
Wind060100
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element select 框绑定对象时的回显处理
weixin_43899935的博客
03-25 2599
<el-select v-model="dockingForm" placeholder="请选择平台名称" value-key="accessInfoId"//value-key 与下面的key保持一致，且必须是value对象中的一个属性 @change="changeInfoId" > <e...
el-select下拉框传值同时传key和value
qq5678574的博客
07-23 4676
<el-select v-model="jobName" placeholder="职位" clearable > <el-option v-for="item in jobNameOptions" :key="item.jobCode" :label="item.jobName" :value="item.jobCode" > </el-option> </el-select> 从接口取到值以后，展示的是jobName，而v-m..
vue2 element-ui select下拉框 选择传递多个参数
m0_65730686的博客
12-05 938
vue2 element-ui select下拉框 选择传递多个参数
el-select下拉框同时传两个甚至更多值给后端
weixin_56733569的博客
07-19 2718
el-select下拉框传多个值给后端
Element中Select选择器value-key使用注意事项以及回显
最新发布
个人学习笔记
05-20 557
value-key 的值必须是对象中一个唯一的标识，类似于:key的意义，但是可以不跟Key一样，一般用一样的即可。因为选择的是一个对象，回显时也应该是一个对象，对象中至少有id，用于与value-key进行匹配。
vue+elementui中，el-select多选下拉列表中，如何同时获取:value和:label的值？
穆雄雄的博客
10-24 2500
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。 项目场景： 正如题目所说，今天在项目过程中遇到了个需求，因为需要在前台展示运动员的名称，但是运动员的编号在别的地方还需要使用，所以想了想，还是将编号和名称一并添加到数据库中，到时候拿的时候也比较方便。就不用在根据编号查询一遍呢了（接口是外部的，重新查的话会影响效率） 使用的技术：element-ui的el-select标签 问题描述： 下面是下拉列表展示的代码： <el-form-item label="人员名称" > ..
vue element-ui e-select 下拉框向后台同时传value和label值 （不用find函数，直接拿选中对象）
龙丨行的博客
07-12 1万+
vue element-ui e-select 下拉框向后台同时传value和label值 value-key
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
补充知识：在Element UI的`select`组件中，如果你需要在`change`事件中传递多个值，可以按照以下方式处理： ```javascript // 在模板中 v-model="selectedValue" @change="handleChange($event, 'otherValue')">...
Vue下拉框回显并默认选中随机问题
10-18
主要介绍了Vue下拉框回显并默认选中随机问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中使用element组件时事件想要传递其他参数的问题
10-16
总结起来，在Vue.js中使用Element UI组件时，如果需要在事件处理函数中传递额外参数，可以利用箭头函数来保持上下文，并将自定义参数与默认参数一起传入。这使得我们的代码更具灵活性，能够更好地满足业务需求。在...
vue+element_ui上传文件,并传递额外参数操作
01-18
3、额外参数传输 <el-upload class=upload-demo action :limit=1 :file-list=formFileList :http-request=handleUploadForm :on-exceed=formHandleExceed :on-remove=formHandleRemove :before-upload=...
el-select 下拉框 value绑定、多个值（欢迎大家补充）
记录常见的问题以及解决办法
03-10 2256
1.@input + index 实现 <el-form-item prop="teamId" label="班组" label-width="100px"> <el-select v-model="formItem.teamId" @input="selectTeamOption" style="width:100%"
Vue+Element+Select获取选中的对象
weixin_34111819的博客
03-20 4011
案例演示：获取select当前选中的所有内容 1 <el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="currentSel"> 2 <el-option v-for="item in options" :...
el-select获取多个参数/el-select传多个参数
weixin_45654407的博客
05-11 6862
element select选择器~~ el-select的change事件默认不传参数时可获取到值是选中的值。 @change="handleSelectGroup" 当涉及到循环动态生成多个select组件并且想要获取到当前所选的组件是哪个的时候，就需要从select的change事件获取到多个参数，一般需要传上当前选中的值与当前索引。 方法一： $event 即是当前所选的值 @change="handleSelectGroup($event, i)" 方法二： val 即是当前所选的值 @cha
Vue踩坑之 el-select下拉框多选，选择后赋值成功，输入框不显示选中的值
qq_40896145的博客
02-23 4865
问题描述： 多选下拉框，选中列表中的选项，但输入框不显示已经选中的数据并且下拉框中已选中的数据不是选中状态。 问题原因： Vue 无法监听动态新增的属性的变化。 问题解决： 方法一： 在el-select选框组件中绑定change事件，如下: changeData() { this.$nextTick(() => { this.$forceUpdate() }) } 方法二：change事件中使用$set来对属性赋值，如下: changeData(val) { this.$set(t
element 组件 el-select option传多个值问题.
zzw123456sxy的博客
08-01 186
后端回显不想要多表联查的话需要我们吧地区id 和地区名称直接返回存入数据库。可以使用多个传值方法。
【无标题】解决element UI select multiple多选下拉框， 赋值和传值到后台处理操作
u014471276的博客
08-16 2707
vue select多选后台返回数据重新提取，变成数组赋值给下拉属性。 传值时，将数组转化成字符串，向后台传值
vue element ui el-select多选与后端传值(多选，换成字符串数组的形式传值)
weixin_38897313的博客
10-11 5532
表单传值，换成字符串数组形式
解决element UI select multiple多选下拉框， 赋值和传值到后台处理操作
热门推荐
shun35的博客
11-20 2万+
前端使用vue，项目中使用的是element ui组件，在使用select下拉框多选时，新增记录时select多选下拉框正常使用，没问题。但是在编辑记录时，编辑界面也为select下拉框赋值了，却没有显示数据。 先放一个select多选下拉框编辑时正确的加载数据的显示效果图： 下拉框代码如下： <el-form-item label="设备属性" prop="setId"> ...
vue结合element实现表单下拉框，后端返回数据后，前端如何回显到表单上
04-27
在Vue结合Element实现表单下拉框时，可以通过v-model指令来绑定表单元素的值，通过设置下拉框的value和label属性，可以实现选项的值和显示文本的分离。当后端返回数据后，可以将表单元素的v-model绑定的值设置为后端返回的数据，即可实现表单数据的回显。具体步骤如下： 1. 在页面中定义下拉框组件，设置下拉框的options属性，用于存储下拉框的选项列表。 ``` <el-select v-model="form.selectValue" placeholder="请选择"> <el-option v-for="item in form.selectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 2. 在Vue组件中定义表单数据，并在mounted钩子函数中，向后端发起请求获取下拉框选项数据。 ``` export default { data() { return { form: { selectValue: '', selectOptions: [] } } }, mounted() { this.getSelectOptions() }, methods: { getSelectOptions() { // 发起后端请求获取下拉框选项数据 // 成功后将数据赋值给this.form.selectOptions } } } ``` 3. 当后端返回数据后，将表单元素的v-model绑定的值设置为后端返回的数据，即可实现表单数据的回显。 ``` this.form.selectValue = responseData.selectValue; ``` 通过上述步骤，就能够实现Vue结合Element实现表单下拉框，并在后端返回数据后实现表单数据的回显。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值