elementui el-select change事件传参问题

 更新时间:2023年01月16日 09:33:43   作者:周家大小姐.  
这篇文章主要介绍了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数据渲染出现闪烁问题

    详解vue数据渲染出现闪烁问题

    本篇文章主要介绍了vue数据渲染出现闪烁问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue中的封装常用工具类

    vue中的封装常用工具类

    这篇文章主要介绍了vue中的封装常用工具类,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue.js数据绑定的方法(单向、双向和一次性绑定)

    vue.js数据绑定的方法(单向、双向和一次性绑定)

    本篇文章主要介绍了vue.js数据绑定的方法(单向、双向和一次性绑定),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Vue 运行高德地图官方样例,设置class无效的解决

    Vue 运行高德地图官方样例,设置class无效的解决

    这篇文章主要介绍了Vue 运行高德地图官方样例,设置class无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 解决vue修改数据页面不重新渲染问题

    解决vue修改数据页面不重新渲染问题

    这篇文章详细介绍了vue渲染机制和如何解决数据修改页面不刷新问题的多种方法,想了解更多的小伙伴可以借鉴阅读
    2023-03-03
  • Vue中使用的EventBus有生命周期

    Vue中使用的EventBus有生命周期

    这篇文章主要介绍了Vue中使用的EventBus有生命周期的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue中CSS动画原理的实现

    Vue中CSS动画原理的实现

    这篇文章主要介绍了Vue中CSS动画原理的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • vue可视化表单设计器自定义组件使用方法

    vue可视化表单设计器自定义组件使用方法

    Vue前端开发中表单组件是排在前三的高频使用的组件,下面这篇文章主要给大家介绍了关于vue可视化表单设计器自定义组件使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • ElementUI 修改默认样式的几种办法(小结)

    ElementUI 修改默认样式的几种办法(小结)

    这篇文章主要介绍了ElementUI 修改默认样式的几种办法(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue中使用window.open()参数示例详解

    vue中使用window.open()参数示例详解

    这篇文章主要介绍了vue中使用window.open()参数详解,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04

最新评论