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.js 中的条件渲染指令

    浅析Vue.js 中的条件渲染指令

    这篇文章主要介绍了Vue.js 中的条件渲染指令,Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vuex中actions的使用教程详解

    Vuex中actions的使用教程详解

    actions作为Vuex的五大核心之一,它的属性是用来处理异步方法的,通过提交mutations实现。本文将具体介绍一下actions的使用教程,需要的可以参考一下
    2022-01-01
  • vue开发中后台系统复杂表单优化技巧

    vue开发中后台系统复杂表单优化技巧

    这篇文章主要为大家介绍了vue开发中后台系统复杂表单的优化技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例

    Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例

    这篇文章主要介绍了Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-11-11
  • VUE跨域详解以及常用解决跨域的方法

    VUE跨域详解以及常用解决跨域的方法

    跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据,下面这篇文章主要给大家介绍了关于VUE跨域详解以及常用解决跨域的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 解决Vue input输入框卡死的问题

    解决Vue input输入框卡死的问题

    这篇文章主要介绍了解决Vue input输入框卡死的问题,文中同时给大家提到了Vue-element中el-input输入卡顿问题及解决方法,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue.js实现简单计时器功能

    vue.js实现简单计时器功能

    这篇文章主要为大家详细介绍了vue.js实现简单计时器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 基于Vue2-Calendar改进的日历组件(含中文使用说明)

    基于Vue2-Calendar改进的日历组件(含中文使用说明)

    这篇文章主要介绍了基于Vue2-Calendar改进的日历组件(含中文使用说明)的相关知识,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • element el-tooltip动态显示隐藏(有省略号显示,没有省略号不显示)

    element el-tooltip动态显示隐藏(有省略号显示,没有省略号不显示)

    本文主要介绍了element el-tooltip动态显示隐藏,主要实现有省略号显示,没有省略号不显示,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • vue中自定义右键菜单插件

    vue中自定义右键菜单插件

    这篇文章主要为大家详细介绍了vue中自定义右键菜单插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论