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项目支付功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • vue实现手机号码抽奖上下滚动动画示例

    vue实现手机号码抽奖上下滚动动画示例

    本篇文章主要介绍了vue实现手机号码抽奖上下滚动动画示例。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Vue3使用路由VueRouter4的简单示例

    Vue3使用路由VueRouter4的简单示例

    在vue.js项目中使用vue-router,可以使用路由进行界面或路径跳转,下面这篇文章主要给大家介绍了关于Vue3使用路由VueRouter4的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • vue 跳转页面$router.resolve和$router.push案例详解

    vue 跳转页面$router.resolve和$router.push案例详解

    这篇文章主要介绍了vue 跳转页面$router.resolve和$router.push案例详解,这样实现了既跳转了新页面,又不会让后端检测到页面链接不安全之类的,需要的朋友可以参考下
    2023-10-10
  • vue父子组件传值以及单向数据流问题详解

    vue父子组件传值以及单向数据流问题详解

    大家应该都知道父组件可以向子组件通过属性形式传递参数,传递的参数也可以随时随意修改;但子组件不能修改父组件传递过来的参数,所以下面这篇文章主要给大家介绍了关于vue父子组件传值以及单向数据流问题的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue如何基于vue-i18n实现多国语言兼容

    Vue如何基于vue-i18n实现多国语言兼容

    这篇文章主要介绍了Vue如何基于vue-i18n实现多国语言兼容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • Vue单文件组件开发实现过程详解

    Vue单文件组件开发实现过程详解

    这篇文章主要介绍了Vue单文件组件开发实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • Vue 过渡实现轮播图效果

    Vue 过渡实现轮播图效果

    本篇文章主要介绍了Vue 过渡实现轮播图效果,Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果。有需要的小伙伴可以参考下。
    2017-03-03
  • 基于 Vue 的树形选择组件的示例代码

    基于 Vue 的树形选择组件的示例代码

    本篇文章主要介绍了基于 Vue 的树形选择组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue 实现左滑图片验证功能

    vue 实现左滑图片验证功能

    网页中滑动图片验证一直是各大网站、移动端的主流校验方式,其主要作用是为了区分人和机器以及为了防止机器人程序暴力登录或攻击从而设置的一种安全保护方式,这篇文章主要介绍了vue 实现左滑图片验证,需要的朋友可以参考下
    2023-04-04

最新评论