ant design of vue 事件添加自定义参数传值并结合v-for指令

官网上的案例

选项的更改要使用@change指定处理的方法
默认传入value 和 option两个参数

<a-select @change="handleChange">
 <a-select-option value="jack">Jack</a-select-option>
 <a-select-option value="lucy">Lucy</a-select-option>
</a-select>
 handleChange(value, option) {
        console.log(value, option);
}

传入自定义参数

但是有时候这些参数不够用,需要传入自定义的参数,比如id。我们可以这样写

<a-select @change="(value, option) => handleChange(value, option, 1)">
 <a-select-option value="jack">Jack</a-select-option>
 <a-select-option value="lucy">Lucy</a-select-option>
</a-select>
 handleChange(value, option, id) {
        console.log(value, option, id);
}

注意:
value 和 option 是默认的参数
最后传入的 1 是自定义参数

结合v-for使用

很多适合需要结合v-for指令来生成自定义参数,下面是一个示例

<a-select :v-for="item in list"  :key="item.id"
@change="(value) => handleChange(value, item.id)">
 <a-select-option value="jack">Jack</a-select-option>
 <a-select-option value="lucy">Lucy</a-select-option>
</a-select>
 handleChange(value, id) {
        console.log(value, id);
}

注意:
这里我们只需要默认的value参数,可以把默认的option去掉

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容