a-checkbox-group的用法2

最新推荐文章于 2024-11-27 17:44:49 发布

reembarkation

最新推荐文章于 2024-11-27 17:44:49 发布

阅读量5.4k

点赞数 1

分类专栏： vue js 文章标签：前端 vue.js vue javascript

本文链接：https://blog.csdn.net/reembarkation/article/details/125446458

版权

js 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

vue

48 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中，如何为每个复选框单独定义change事件，以便在选择时只针对选中的复选框进行特定操作。通过在`<a-checkbox>`组件上绑定事件监听器，并传递当前值，可以实现对每个选项的个性化处理。示例代码展示了如何在复选框组中使用v-for循环，并在change事件中更新选项的状态。

摘要由CSDN通过智能技术生成

有时候在项目中，一个复选框组中，选中某个复选框都要进行一定的操作，如果不想使用整体的change事件，可以在单个的checkbox中定义change事件，比如如下代码：

      <a-checkbox-group v-model="checkedList">
        <a-row :gutter="24">
          <a-col :span="6" v-for="{ value, label } in Options" :key="value">
            <a-checkbox :value="value" @change="change($event,value)">
              {{ label }}
            </a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>

其中Options是数组：[{ label:'xxx', value: 1 },....]， checkedList是选中的id的集合[1,2,...]

事件代码如下：

 change(e,value){

      let option={
        id:value,
        isuse:e.target.checked
      }
    ...
 }

这样选择某个节点，就可以单独响应事件。