ElementUI el-checkbox 点击Label不取消复选框的选中状态

十六夜之彼岸舞

于 2021-06-16 11:08:00 发布

阅读量1.6k

点赞数

文章标签： java python vue 机器学习 android

本文链接：https://blog.csdn.net/flowerStream/article/details/117976925

版权

本文介绍了如何在ElementUI中点击label时不取消el-checkbox的选中状态，通过将change事件替换为click事件，并使用Span结合prevent修饰符阻止默认事件。作者彼岸舞分享了这个实用的工作技巧。

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

在点击label的时候不取消复选框的状态

实现

将change事件改为click事件

<div class="grid-content bg-purple">
                          <div class="grid-content bg-purple">
                              <el-checkbox-group v-model="areasThreeCheck">
<#--                                  <el-checkbox :label="data.id" :key="data.id" :value="data.id" v-for="data in areasThree" @change="areasThreeChang(data.id)">{{data.name}}</el-checkbox>-->
                                  <el-checkbox :label="data.id" :key="data.id" :value="data.id" v-for="data in areasThree">
                                      <span @click.prevent="areasThreeChang(data.id)">{{data.name}}</span>
                                  </el-checkbox>
                              </el-checkbox-group>
                          </div>
                      </div>

自己使用Span渲染展示标签然后通过事件的修饰符[prevent]阻止默认事件

作者：彼岸舞

时间：2021\06\16

内容关于：工作中用到的小技术

本文属于作者原创,未经允许,禁止转发