elementui单选框选中取消

最新推荐文章于 2025-04-01 11:11:59 发布

原创最新推荐文章于 2025-04-01 11:11:59 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

前端js 专栏收录该内容

4 篇文章

订阅专栏

文章展示了在ElementUI框架中，如何利用点击事件来实现单选框选中状态的可取消功能。通过在<el-radio>组件上绑定click事件并自定义方法`clickItem`，动态修改`v-model`的值，从而达到预期效果。

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

elementui自带单选框不能取消, 可以通过点击事件来进行值的修改,代码如下

   <el-form-item label="">
      <el-radio-group v-model="resource">
       <el-radio :label="true" @click.native.prevent="clickItem(true)">线上品牌商赞助</el-radio>
      </el-radio-group>
    </el-form-item>

export default {
    data() {
        return {
            resource: false,
        };
    },
    methods: {
        clickItem(value) {
            value === this.resource ? this.resource = "" : this.resource = value
        },
    },
};