elementui el-select change事件传参问题
周家大小姐. 人气:0elementui 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) // 这个就是你传过来的值了 }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容