Vue3+ElementUI 多选框中复选框和文字点击事件分离

Humble-H

于 2024-09-18 17:58:41 发布

阅读量625

点赞数 14

文章标签： elementui 前端

本文链接：https://blog.youkuaiyun.com/weixin_52376708/article/details/142339839

版权

在vue3中，想要实现elementUi复选框的选择框跟文字点击事件分离，需要给文字点击事件加上.prevent来阻止默认事件。代码如下：

 <el-checkbox-group>
                  <el-checkbox v-for="(item, index) in data" :key="index"
                    :label="item.value"><a @click.prevent="showAssembly()">{{item.label }}</a></el-checkbox>
                </el-checkbox-group>

const data = [
  {
    label: '选项1',
    value: '1',
  },
  {
    label: '选项2',
    value: '2',
  },
  {
    label: '选项3',
    value: '3',
  },
];

如上代码所示，给文字包裹上a标签，在点击事件加上.prevent后绑定自定义方法，即可实现复选框与文字的点击事件分离。