`

element-ui的el-radio怎么在已选中的情况下,再次点击取消选中?

    博客分类:
  • Vue
 
阅读更多

第一种:
<el-radio-group v-model="radio2">
  <el-radio @click.native.prevent="clickitem(3)" :label="3"> 备选项</el-radio>
  <el-radio @click.native.prevent="clickitem(6)" :label="6"> 备选项</el-radio>
  <el-radio @click.native.prevent="clickitem(9)" :label="9"> 备选项</el-radio>
</el-radio-group>
         
clickitem (e) {
  e === this.radio2 ? this.radio2 = '' : this.radio2 = e
},


扩展下:通用写法,就是clickitem事件中,不要出现v-model的对象名
<el-radio-group v-model="radio2">
   <el-radio label="Yes" @click.native.prevent="radioExt('Yes', radio2, 'radio2')">Yes</el-radio>
   <el-radio label="No" @click.native.prevent="radioExt('No', radio2, 'radio2')">No</el-radio>
</el-radio-group>


radioExt(v, m, _m) {
  let _v = 'this.' + _m + '="' + v + '"'
  if (v === m) {
    _v = 'this.' + _m + '=null'
  }
  eval(_v)
}


建议上面的方式比较好,下面这个有弊端,必须要取消选中的那一个,才能再次选择


第三种:
<el-checkbox-group v-model="checkList" :max="1">
    <el-checkbox label="选项 A"></el-checkbox>
    <el-checkbox label="选项 B"></el-checkbox>
    <el-checkbox label="选项 C"></el-checkbox>
</el-checkbox-group>

data () {
    return {
        checkList: ['选项A']
    }
}


分享到:
评论

相关推荐

    解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    在使用element-ui开发Web项目时,经常会遇到一些组件使用上的细节问题,其中element-ui中的下拉多选框组件el-select使用时,如何设置默认值且不可删除,是一个较为常见的需求。本文将详细介绍如何解决这个问题,以及...

    element-ui本地编译后的js包

    这个压缩包文件 "element-ui本地编译后的js包" 提供了 Element UI 组件库的本地编译版本,特别适合在无法连接到 CDN(内容分发网络)的环境下使用。 在实际开发中,CDN 通常用于托管公共资源,如 JavaScript 库和 ...

    基于element-ui单选按钮插件.zip

    Element UI 的单选按钮组件(&lt;el-radio&gt;)已经相当完善,但这款插件可能是为了满足特定设计需求或提供额外功能而开发的。例如,它可能包含了自定义样式、动画效果、额外的事件处理等特性,以提升用户体验。 在...

    element-ui 2.4.6 元件

    12. **Axure元件**:在提供的文件名"axure 元件 element-ui 2.4.6.rplib"中,Axure是一个原型设计工具,元件库可能是预设好的Element UI组件,便于非编码人员在Axure中快速构建基于Element UI的原型界面。...

    elsa:elsa(eleme simple admin)基于 element-ui 封装 el-form,el-table 等组件,用于快速开发后台管理页面

    :high_voltage: elsa(eleme simple admin)基于 element-ui 封装 el-form,el-table 等组件,适用于快速开发后台管理项目。 用法示例,见: Quickstart npm i elsa-vue -S // vue main.js import Vue from 'vue' ...

    element-ui循环显示radio控件信息的方法

    如下所示: &lt;el label=线路类型: prop=isGive&gt; ... &lt;el label=item.id key=item.id v-for=item&gt;{{item.name}}&lt;/el&gt; &lt;/el&gt; &lt;/el&gt; data () { return { merchantId: 0, centerDialogVisible: fa

    vue基于element-ui单选按钮美化插件

    在标题提到的“vue基于element-ui单选按钮美化插件”中,我们主要关注的是如何在Element UI的基础上对单选按钮(radio button)进行美化。Element UI默认的样式可能无法满足所有设计需求,因此开发者通常会创建...

    elementUi vue el-radio 监听选中变化的实例代码

    在 el-radio-group 中,可以使用 v-model 指令绑定当前选中的值,并通过 @change 事件来监听值的变化。 实例代码如下: ```html &lt;el-radio-group v-model="radioSex" @change="changeHandler"&gt; &lt;el-radio class=...

    基于element-ui单选按钮插件特效代码

    在本文中,我们将深入探讨基于Element-UI的单选按钮插件,这是一款适用于Vue.js项目的美化组件。Element-UI是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库,它提供了丰富的界面元素,使得开发过程更加...

    element-ui 离线中文文档api下载 版本2.4

    这个版本的文档包含了所有从官网下载的外部 JavaScript 文件,确保在没有网络连接的情况下也可以完整浏览和查阅 Element UI 的 API 文档。 Element UI 提供了一系列丰富的组件,涵盖了表单、布局、按钮、对话框、...

    基于element-ui单选按钮插件

    `&lt;el-radio&gt;`用于创建单个选项,而`&lt;el-radio-group&gt;`则用于管理这些选项,确保每次只有一个选项被选中。 现在,这款基于Element UI的单选按钮美化插件引入了一些新的特性: 1. **样式多样化**:除了默认样式,该...

    vscodeElementUI代码提示智能提示问题.pdf

    elrg &lt;el-radio-group&gt; 3. elc &lt;el-checkbox&gt; 4. elcg &lt;el-checkbox-group&gt; 5. eli &lt;el-input&gt; 6. elit &lt;el-input type="textarea"&gt; 7. elin &lt;el-input-number&gt; 7. elin &lt;el-input-number&gt; 8. elsel &lt;el-select&gt; 9....

    ElementUI v2.15 使用手册.pdf

    ElementUI是基于Vue.js的桌面端组件库,它提供了一套完整的UI组件,方便开发者快速构建优雅的Web界面。本手册主要介绍ElementUI v2.15版本的安装、快速上手方法、国际化、自定义主题、内置过渡动画以及各类组件的...

    ElementUI radio组件选中小改造

    ElementUI 是自己比较钟爱的...具体现象就是,当通过 mapState 方法自动一个计算对象数组,然后将它绑定到 el-radio 上时,el-radio-group 里的 el-radio 无法根据其绑定值正确的显示 checked 状态。 例如下面这段代码

    在element-ui的el-tree组件中用render函数生成el-button的实例代码

    总的来说,本文通过实例代码向读者展示了如何在el-tree组件中利用render函数动态地在每个树节点上生成一个el-button按钮,这一操作涉及到Vue.js的虚拟DOM的概念以及Element UI组件的使用。对于希望在树形控件中添加...

    element-table.zip

    Element UI 提供了 `el-radio` 单选按钮组件,适用于评分场景。每个评分等级可以对应一个单选按钮,用户只能选择其中一个。可以将单选按钮嵌入到表格的某一列中,通过绑定 `v-model` 来控制选中的值,然后根据这个...

    vue使用Element组件时v-for循环里的表单项验证方法

    正常情况下,我们可以按照官方文档添加规则,需要验证的表单项设置 prop,然后提交表单时通过 form 的 validate 方法验证表单项。 但是,如果表单项里有通过 v-for 动态生成的表单项,如何设置验证规则就变得复杂了...

Global site tag (gtag.js) - Google Analytics