脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element UI 自定义传参

解决element UI 自定义传参的问题

 更新时间：2018年08月22日 11:51:47   作者：userkang  
今天小编就为大家分享一篇解决element UI 自定义传参的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

<el-autocomplete
 v-model="state4"
 :fetch-suggestions="querySearchAsync"
 placeholder="请输入内容"
 @select="handleSelect"
></el-autocomplete>

这里的 hanleSelect 默认绑定的参数是选中的那条数据。

但是如果一个页面有好几个相同的组件，要想知道选中的是第几个。

@select="handleSelect(item, index)" // 这样肯定不行的

解决方法：

<el-autocomplete
 v-model="state4"
 :fetch-suggestions="querySearchAsync"
 placeholder="请输入内容"
 @select="((item)=>{handleSelect(item, index)})" // 写个闭包就可以了，index表示第几个组件
></el-autocomplete>

基于element-UI 事件添加额外自定义参数的方法

要想在element的 event事件中增加自定义参数，如果你直接在方法中写，他就会将原来的参数覆盖！

例如：

<input :value="scope.row.confirmAmount" @change="updateConfirmAmount(scope.row)" placeholder="请输入审核数量" />

但是你可以在自定义参数之前加入 $event 这个变量，然后再传其他值，这样的话event事件的回调参数就会有了。

例如：

 <input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" placeholder="请输入审核数量" />

下面是我今天解决问题的案例：

<code class="language-html"><!-- 明细列表 --> 
<el-table :data="midSubmitDetailTableData"  border stripe style="width: 100%"> 
  <el-table-column prop="submitAmount" label="本次交工数量"></el-table-column> 
  <el-table-column prop="confirmAmount" label="审核数量"> 
    <template slot-scope="scope"> 
      <input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" placeholder="请输入审核数量" /> 
    </template>   
  </el-table-column> 
</el-table></code>

对应的方法：

updateConfirmAmount(data, row){
  var _value = data.currentTarget._value;
  var value = data.currentTarget.value;
 
},

最后抱怨一句：csdn的编译器越来越不好用了！

以上这篇解决element UI 自定义传参的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue项目中v-model父子组件通信的实现详解

    vue项目中v-model父子组件通信的实现详解

    vue.js，是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。下面这篇文章主要给大家介绍了关于vue项目中v-model父子组件通信实现的相关资料，需要的朋友可以参考下。
    2017-12-12
  • vue/cli3版本打包如何去掉soucemap文件

    vue/cli3版本打包如何去掉soucemap文件

    这篇文章主要介绍了vue/cli3版本打包如何去掉soucemap文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • vue3中reactive和ref的实现与区别详解

    vue3中reactive和ref的实现与区别详解

    reactive和ref都是vue3实现响应式系统的api,他们是如何实现响应式的呢,reactive和ref又有什么区别呢,下面小编就来和大家详细讲讲,希望对大家有所帮助
    2023-10-10
  • Vue 动态添加路由及生成菜单的方法示例

    Vue 动态添加路由及生成菜单的方法示例

    这篇文章主要介绍了Vue 动态添加路由及生成菜单的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • Backbone前端框架核心及源码解析

    Backbone前端框架核心及源码解析

    这篇文章主要为大家介绍了Backbone前端框架核心及源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • element el-upload文件上传覆盖第一个文件的实现

    element el-upload文件上传覆盖第一个文件的实现

    这篇文章主要介绍了element el-upload文件上传覆盖第一个文件的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • vue-video-player实现实时视频播放方式(监控设备-rtmp流)

    vue-video-player实现实时视频播放方式(监控设备-rtmp流)

    这篇文章主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 解决vue项目报错webpackJsonp is not defined问题

    解决vue项目报错webpackJsonp is not defined问题

    下面小编就为大家分享一篇解决vue项目报错webpackJsonp is not defined问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 一文详解Vue3中的setup函数的用法和原理

    一文详解Vue3中的setup函数的用法和原理

    在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑,本文将主要介绍Setup的基本用法和少量原理
    2024-02-02
  • vue el-radio单选传值和默认选中方式

    vue el-radio单选传值和默认选中方式

    文章介绍了一个父组件和子组件的交互过程,父组件通过点击“关联公司”输入框弹出子组件dialog,子组件中使用SelectCompany.vue实现默认选中功能,作者分享了个人经验,希望能对大家有所帮助
    2025-01-01

最新评论