element-ui组件中的select等的change事件中传递自定义参数

最新推荐文章于 2024-11-15 20:53:54 发布

原创最新推荐文章于 2024-11-15 20:53:54 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

element

2 篇文章

订阅专栏

在 Vue.js 的 element-ui 框架中，当使用 select 组件时，如果需要在 change 事件中同时传递选中项的值和其对应的 index，可以采用事件回调函数的方式。例如，通过在 v-for 循环中为每个 select 添加一个 @change 事件，事件处理函数接收 event 和 index 作为参数，从而实现对同一循环中其他元素状态的改变。错误的做法是直接在 @change 中传入 val 和 index，正确的做法是在事件处理函数内部利用 v-model 获取选中项的值。

element-ui组件中的select等的change事件中传递自定义参数

触发change事件时可能不只需要传递被选中项的值，还要传递index过去，来改变同一循环中的其他标签的状态。
那你就需要这样像以下这样写：

<div v-for="(item,index) in itemList">
      <el-select v-model="item.value" @change="((event)=>{changeStatus(event, index)})">
        <el-option v-for="val in options" 
          :key="val.key" 
          :label="val.label"
           value="val.label">
         </el-option>
      </el-select>
 </div>

下面这样写是无效的：