el-checkbox 控制只能单选

最新推荐文章于 2024-02-28 17:39:54 发布
最新推荐文章于 2024-02-28 17:39:54 发布
阅读量1w 收藏 12
点赞数 2
分类专栏： vue+elementui相关知识点和难点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44171757/article/details/103403424
版权

情况1：只有两个多选框

<el-checkbox-group v-model="form.checkState">
    <el-checkbox  false-label='null' true-label="true" name="state">启用</el-checkbox>
    <el-checkbox  false-label='null' true-label="false" name="state">禁用</el-checkbox>
</el-checkbox-group>

情况2：有N个多选框

思路：当多选的时候 数组checklist会自动push数据，如果要实现单选，只需要把数组checklist第一个数据删掉就行了。

<el-checkbox-group v-model="checkList" @change="bindCheckBox">
    <el-checkbox label="1">1</el-checkbox>
    <el-checkbox label="2">2</el-checkbox>
    <el-checkbox label="3">3</el-checkbox>
    <el-checkbox label="4">4</el-checkbox>
</el-checkbox-group>

methods:{
	bindCheckBox(value){
        if(this.checkList.length > 1){
            this.checkList.splice(0,1)
        }
    }
}
String佳佳
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
ElementUI：Checkbox实现单选，嵌套多选
weixin_54362826的博客
07-10 3934
官网地址：ElementUI-Checkbox 一、Checkbox 基础介绍 <template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-checkbox> </template> <script> export default { data() { return { checke
element-ui CheckBox全选.txt
12-24
vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件
将el-table checkbox 多选改为单选
m0_60907575的博客
10-23 280
【代码】将el-table checkbox 多选改为单选。
vue项目elementui 的 el-checkbox复选框改成单选框样式：实现全选、全否、单选、反选功能（最简单的方法）
南北极之间
11-17 6999
我的需求是：只有2个选项。又想使用复选框的样式，自己又不想去改样式。 于是可以用js去控制选中的值，如果选中值的长度大于1，则每次只截取第二个数。因为选中值是从后面追加进去的。第二个数就是最新选中值。 效果： 代码： <el-form-item label="角色" :label-width="formLabelWidth"> <el-checkbox-group v-model="someList.role"> &
el-checkbox实现全选，反选，单选
最新发布
凡尘
02-28 360
el-checkbox实现全选，反选，单选。
element checkbox实现单选效果
qq_53986004的博客
02-01 639
element checkbox实现单选效果
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
前言 最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的 例如： 定义的 data 的 form 里面是空对象，需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList，这个就是动态生成的表单数据 v-for 循环 checkList，得到 key，然后直接 v-model=“form.key” 动态生成 form 里面的 key <el-
表单元素和文字垂直居中对齐问题解决整理
09-25
为了使表单元素和文字都垂直居中对齐，当文本框和下拉框都没问题，但是单选框和复选框就了，经过反复测试终于完整搞定与大家分享，感兴趣的各位可不要错过了哈
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
nested_el-checkbox element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应的上级菜单也选中 若二级子菜单无一个选中，则对应的一级菜单也不是选中状态 当一级菜单发生点击事件时，若原本为选中状态，则取消选中，若该菜单下有二级子菜单，所有子菜单也取消选中状态；若原本为未选中状态，则改为选中状态，若该菜单下有二级子菜单，所有子菜单也改为选中状态。 实现已有的选择记录的复现。 实现过程 1.data数据 data() { return { menu: [] //所有的菜单数组， menusIds: [] //已选的菜单id数组 } } 2.html部分   要实现一个嵌套的效果，每一个一级菜单应该
el-checkbox 实现单选功能
qq_44981128的博客
12-21 1万+
一、两个多选框实现单选 data(){ return{ status:1 } } <el-checkbox-group v-model="status"> <el-checkbox false-label='null' :true-label="1" name="status">启用</el-checkbox> <el-checkbox false-label='null' :true-label="2" name="status"&
Vue el 使用el-checkbox-group复选框进行单选框操作
小菜鸟的博客
09-30 8962
让复选框进行单选框操作 el-checkbox-group这个组件与其他复选框不一样，我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大，v-ror循环应该看的懂。重要的是@chage到我们写的类 <el-checkbox-group v-model="checked" size="medium"> <el-checkbox-button v-for="city in cities" :label="city" :key
vue + el-checkbox 单选功能
HZM_CSDN的博客
11-20 2372
需求: 用 el-checkboc 实现单选功能并且当选中某一项时则回填到input框里,当点击 enter 键或者是 按下搜索图标按键,来实现页面搜索内容的同步展示;
elment-ui tree单选实现
01-03
elment-ui 里面的树形控件，默认是多选的，如果你仔细看过各个属性和方法就可以实现单选。 check-strictly 关闭父子关联 node-key 设置唯一标识 show-checkbox 允许节点可选 ref=“tree” 添加方法 @check=“treeChange” check方法： treeChange(now, tree) { this.$nextTick(() => { this.$refs.tree.setCheckedKeys([now.id], true); }); } 获取选中的节点key
JS实现checkbox互斥(单选)功能示例
01-21
本文实例讲述了JS实现checkbox互斥(单选)功能。分享给大家供大家参考，具体如下： <html xmlns=http://www.w3.org/1999/xhtml > <head> <title>www.jb51.net CheckBox单选</title> [removed] function sel1(obj){ if(obj.checked){ //如果当前项被选中了 document.all.chk2.checked=false //则不能选择第二组 document.all.sel1.selectedIndex=4
checkbox点击事件修改样式
01-08
由于需要个性化checkbox的点击事件，不得以研究了一下点击事件。奈何这个项目组居然没有checkbox的样式，看着这原生的样式丑到爆，不得以研究了一下checkbox。（radio也是同理，区别是最好通过条件控制只能单选。） 这里先附上样式灵感来源地址 如果有需要变更图标的，可以在上述地址选取。 效果图： tip:需要用到jquery,注意导入。 checkbox.js $(function() { //activeCheckBox(); activeCheckBoxBySelector(, addSpan
elementUi中checkbox的属性indeterminate 状态和v-model的关系
01-08
华东 对于indeterminate和v-model绑定的hdIsIndeterminate和hdCheckAll的值 如果true true 或者 true false样式为- 如果false true样式为√ 如果false false样式为不勾 效果如下： -1>{{item.label}} 禁止编辑的时候你需要考虑hdIsIndeterminate和hdCheckAll的值 handleCheckAllChange(val, key) { console.log(val, key, 'key') let
el-checkbox:具有纯CSS3广播的UI库，可进行检查，切换
05-09
el-checkbox一套纯css3的单选、复选、开关UI库。A UI library with pure CSS3 radio, check, switch.Description组件引入blue、red、green、yellow四种主题色(参考了element UI的颜色)命名空间也为el-，均以em为单位...
el-table添加 loading 效果
热门推荐
string佳佳的博客
07-29 3万+
在el-table标签里面加如下代码，data里面自己定义pictLoading=false，加载数据之前设为true，加载完成之后设为false <el-table v-loading = "pictLoading" element-loading-background = "rgba(0, 0, 0, 0.5)" element-loading-...
el-input 限制输入框只能输入数字和小数
string佳佳的博客
10-08 3万+
oninput =“value=value.replace(/[^\d]/g,’’)” //只能输入数字 oninput =“value=value.replace(/[^0-9.]/g,’’)” //只能输入数字和小数 <el-input v-model="sjje" oninput ="value=value.replace(/[^0-9.]/g,'')" class="money ...
el-checkbox-group单选
04-28
el-checkbox-group是一个Vue组件，用于呈现一个多选的复选框列表。然而，在开发中，有时需要单选项，就需要将其改为单选。 实现单选很简单，只需将每个选项的v-model绑定到同一个变量即可。例如，假设有三个选项：选项1、选项2和选项3。那么可以创建一个名为selected的data属性，并将每个选项的v-model绑定到它。代码如下： <el-checkbox-group v-model="selected"> <el-checkbox label="选项1"></el-checkbox> <el-checkbox label="选项2"></el-checkbox> <el-checkbox label="选项3"></el-checkbox> </el-checkbox-group> <script> export default { data() { return { selected: "" }; } }; </script> 在这个例子中，变量selected的值将是一个字符串，它将是所选选项的标签。如果用户选择了选项1，那么selected的值将变为“选项1”。如果后来又选择了选项2，selected的值将变为“选项2”。但是，如果选项2和选项1不是单选，那么用户将能够同时选择它们。 为了确保只有一个选项被选中，我们需要把每个选项的v-model的值改为相同的值。此外，还需要在el-checkbox上添加一个v-on:change事件监听器，这样当用户选择一个新选项时，就会取消选择先前选中的选项。 <el-checkbox-group v-model="selected"> <el-checkbox label="选项1" v-model="selected" v-on:change="selected='选项1'"></el-checkbox> <el-checkbox label="选项2" v-model="selected" v-on:change="selected='选项2'"></el-checkbox> <el-checkbox label="选项3" v-model="selected" v-on:change="selected='选项3'"></el-checkbox> </el-checkbox-group> <script> export default { data() { return { selected: "" }; } }; </script> 这些更改将确保只有一个选项是选中的，而其他选项将被取消选中。现在，我们已经把el-checkbox-group转变成了单选。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值