elementui el-select change事件传参问题
elementui el-select change事件传参
需求:当用户选择select的时候change事件需求获取到当前的整个值
:value的时候把整个item都传进去,用value-key接收就会传给change事件
<el-select v-model="ruleForm.userName" :loading="commissionerListLoading" value-key="item" class="control" placeholder="请选择" @change="handleCommissioer"> <el-option v-for="(item,idx) of commissionerList" :key="idx" :label="item.userName" :value="item"/> </el-select>
但是会发现当赋值的时候数据有变但是视图不变;可以用change中修改
// 选择专员姓名 handleCommissioer(val) { console.log(val) this.ruleForm.userName = val.userName this.ruleForm.userCode = val.userCode this.getLifeInsurance(val.userCode) },
el-select的change事件,传递多个值
下拉框列表的change事件,自带一个参数,就是为下拉框选中的值,但是有时候我们需要在带一个参数过去,就会覆盖原来的参数,要怎么办?
这个时候我们可以借助箭头函数,完美解决传参问题。
代码如下:
// An highlighted block <el-table border stripe :data="searchForm.taxPlanEntityList" style="width: 100%"> <el-table-column label="公司名称" align="center" min-width="140" show-overflow-tooltip> <template slot-scope="{row,$index}" > <el-select v-model="row.deptId" placeholder="请选择" @change="(deptId) => handleChangeDeptId(deptId, $index)"> <el-option v-for="item in projectList" :label="item.name" :value="item.deptId" :key="item.deptId"></el-option> </el-select> </template> </el-table-column> </el-table>
方法如下:
handleChangeDeptId(deptId, index) { console.log(deptId, index) // 这个就是你传过来的值了 }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
这篇文章主要介绍了Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下2020-11-11基于Vue2-Calendar改进的日历组件(含中文使用说明)
这篇文章主要介绍了基于Vue2-Calendar改进的日历组件(含中文使用说明)的相关知识,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04element el-tooltip动态显示隐藏(有省略号显示,没有省略号不显示)
本文主要介绍了element el-tooltip动态显示隐藏,主要实现有省略号显示,没有省略号不显示,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
最新评论