如何在element-UI 组件的change事件中传递自定义参数

最新推荐文章于 2025-05-21 09:41:29 发布

转载最新推荐文章于 2025-05-21 09:41:29 发布 · 818 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mmzuo-798/p/10438071.html

文章标签：

#ui #javascript #ViewUI

本文详细解析了在Vue中如何正确处理循环生成的Select组件的change事件，通过实例展示了如何将被选中项的值及当前索引传递给父组件的方法，确保状态更新的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以select为例，如果select写在循环里，触发change事件时可能不只需要传递被选中项的值，还要传递index过去，来改变同一循环中的其他标签的状态。

下面这样写是无效的：

@change="changeStatus(val, index)"

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

这样再封装一层就可以了：

@change="((val)=>{changeStatus(val, index)})"

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

亲测有效！^_^

转载于:https://www.cnblogs.com/mmzuo-798/p/10438071.html