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

最新推荐文章于 2023-10-26 11:01:04 发布

原创最新推荐文章于 2023-10-26 11:01:04 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

Element+Vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在 Element UI 的事件中添加自定义参数，包括使用闭包传递组件索引和利用 $event 变量保留原有事件参数的方法。

当使用el-autocomplete控件时代码如下：

<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="请输入审核数量" />

接下来我遇到的问题：

            <el-form-item
              v-for="(userjob, index) in dataForm.jobList"
              :label="'部门/岗位' + (index+1)"
              :key="userjob.id"
              :prop="'jobList.' + index + '.value'"
              :label-width="formLabelWidth">
              <popup-tree-input
                :data="deptData"
                :props="deptTreeProps"
                :prop="userjob.deptName"
                :node-key="userjob.id"
                :current-change-handle="((item)=>{deptTreeCurrentChangeHandle(item, index)})"
                style="float: left;width: 30%"
              />

              <popup-tree-input
                :data="jobs"
                :props="jobTreeProps"
                :prop="userjob.jobName"
                :node-key="userjob.jobId"
                :current-change-handle="((item)=>{jobTreeCurrentChangeHandle(item, index)})"
                style="float: left;width: 30%"
              />
              
              <el-button type="danger" @click.prevent="removeJobDept(userjob)">删除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary"  @click="addJobDept">新增岗位</el-button>
            </el-form-item>

对应的js代码

 jobTreeCurrentChangeHandle(data,index) {
      console.log(JSON.stringify(data))
    }