`
- 浏览:
623057 次
- 性别:
- 来自:
上海
-
element-ui的el-radio怎么在已选中的情况下,再次点击取消选中?
第一种:
<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']
}
}
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
在使用element-ui开发Web项目时,经常会遇到一些组件使用上的细节问题,其中element-ui中的下拉多选框组件el-select使用时,如何设置默认值且不可删除,是一个较为常见的需求。本文将详细介绍如何解决这个问题,以及...
这个压缩包文件 "element-ui本地编译后的js包" 提供了 Element UI 组件库的本地编译版本,特别适合在无法连接到 CDN(内容分发网络)的环境下使用。 在实际开发中,CDN 通常用于托管公共资源,如 JavaScript 库和 ...
Element UI 的单选按钮组件(<el-radio>)已经相当完善,但这款插件可能是为了满足特定设计需求或提供额外功能而开发的。例如,它可能包含了自定义样式、动画效果、额外的事件处理等特性,以提升用户体验。 在...
12. **Axure元件**:在提供的文件名"axure 元件 element-ui 2.4.6.rplib"中,Axure是一个原型设计工具,元件库可能是预设好的Element UI组件,便于非编码人员在Axure中快速构建基于Element UI的原型界面。...
: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' ...
如下所示: <el label=线路类型: prop=isGive> ... <el label=item.id key=item.id v-for=item>{{item.name}}</el> </el> </el> data () { return { merchantId: 0, centerDialogVisible: fa
在标题提到的“vue基于element-ui单选按钮美化插件”中,我们主要关注的是如何在Element UI的基础上对单选按钮(radio button)进行美化。Element UI默认的样式可能无法满足所有设计需求,因此开发者通常会创建...
在 el-radio-group 中,可以使用 v-model 指令绑定当前选中的值,并通过 @change 事件来监听值的变化。 实例代码如下: ```html <el-radio-group v-model="radioSex" @change="changeHandler"> <el-radio class=...
在本文中,我们将深入探讨基于Element-UI的单选按钮插件,这是一款适用于Vue.js项目的美化组件。Element-UI是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库,它提供了丰富的界面元素,使得开发过程更加...
这个版本的文档包含了所有从官网下载的外部 JavaScript 文件,确保在没有网络连接的情况下也可以完整浏览和查阅 Element UI 的 API 文档。 Element UI 提供了一系列丰富的组件,涵盖了表单、布局、按钮、对话框、...
`<el-radio>`用于创建单个选项,而`<el-radio-group>`则用于管理这些选项,确保每次只有一个选项被选中。 现在,这款基于Element UI的单选按钮美化插件引入了一些新的特性: 1. **样式多样化**:除了默认样式,该...
elrg <el-radio-group> 3. elc <el-checkbox> 4. elcg <el-checkbox-group> 5. eli <el-input> 6. elit <el-input type="textarea"> 7. elin <el-input-number> 7. elin <el-input-number> 8. elsel <el-select> 9....
ElementUI是基于Vue.js的桌面端组件库,它提供了一套完整的UI组件,方便开发者快速构建优雅的Web界面。本手册主要介绍ElementUI v2.15版本的安装、快速上手方法、国际化、自定义主题、内置过渡动画以及各类组件的...
ElementUI 是自己比较钟爱的...具体现象就是,当通过 mapState 方法自动一个计算对象数组,然后将它绑定到 el-radio 上时,el-radio-group 里的 el-radio 无法根据其绑定值正确的显示 checked 状态。 例如下面这段代码
总的来说,本文通过实例代码向读者展示了如何在el-tree组件中利用render函数动态地在每个树节点上生成一个el-button按钮,这一操作涉及到Vue.js的虚拟DOM的概念以及Element UI组件的使用。对于希望在树形控件中添加...
Element UI 提供了 `el-radio` 单选按钮组件,适用于评分场景。每个评分等级可以对应一个单选按钮,用户只能选择其中一个。可以将单选按钮嵌入到表格的某一列中,通过绑定 `v-model` 来控制选中的值,然后根据这个...
正常情况下,我们可以按照官方文档添加规则,需要验证的表单项设置 prop,然后提交表单时通过 form 的 validate 方法验证表单项。 但是,如果表单项里有通过 v-for 动态生成的表单项,如何设置验证规则就变得复杂了...