vue项目elementui 的 el-checkbox复选框改成单选框样式:实现全选、全否、单选、反选功能(最简单的方法)
2023-09-14 09:04:07 时间
我的需求是:需要单选功能,又想使用复选框的样式,自己又不想去自定义修改样式。所以可以使用如下的方法:
于是可以用js去控制选中的值,如果选中值的长度大于1,则每次只截取第二个数。因为选中值是从后面追加进去的。第二个数就是最新选中值。
我看网上有很多方法可以实现这个效果。但是我自己写的这个方法最简单。
单选功能:点击哪个就选中哪个
反选功能:再次点击同一个,就能实现反选功能
手动全否功能:目前这个代码、可以手动点击。全都不选就行了。
一键全选、全否功能(在文末)
效果:
代码:
<el-form-item label="角色" :label-width="formLabelWidth">
<el-checkbox-group v-model="someList.role">
<el-checkbox v-for="(item,index) in roleList" :label="item" :key="index"
@change="handleCheckedRolesChange(item,someList)">{{ item }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
data() {
return {
action: '', //当前行为,change(修改用户信息),add(新增用户)
someList: [], //需要修改的某条用户数据
roleList: ['管理员', '编辑', '编辑2', '编辑3', '编辑4'], //角色列表
userlist: [
{
name: ' 测试账号1',
account: 'abc111',
password: '111',
phone: '1234567890',
role: ['编辑'],
other: '其他备注',
isDisable: 'true'
}
]
}
}
//角色单选
handleCheckedRolesChange(item, someList) {
if (someList.role.length > 1) {
// someList.role=[]
// this.$message.error('只能设置一种角色!');
console.log(someList.role)
let one = someList.role.splice(1)
someList.role = one
console.log(one)
}
}
大功告成!
以上就是代码就可以实现所要的功能了。
下面是知识补充:
Array.slice(start,end),
从start开始,end之前结束,不到end;如果不给end值,从start开始到数组结束。start可以给负值,-1表示数组最后位置,-2表示倒数第二个,以此类推,顾前不顾后。在数组中添加删除或替换元素
splice();在任意位置添加或删除元素,返回删除或被替换的值,如果没有被删除或替换则返回空数组;
splice()方法会修改原数组的值;
只有一个值时,从当前位置删除到数组末尾
let arr=[1,2,3,4,5];
let num1=arr.splice(1)
console.log(num1,arr)//num1=[2,3,4,5];arr=[1];
VM390:3 (4) [2, 3, 4, 5] [1]
关于js数组的常用方法。可以看看这篇文章:
一键全选、全否功能:
如果想使用全选功能的话。elementui 有自带的全选、全否功能:
indeterminate 状态
indeterminate
属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果
相关文章
- vue中时间戳转日期格式化的方法(一看就会)「建议收藏」
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- 如何查看Vue项目vue的版本号
- 狂神说Vue笔记整理「建议收藏」
- 尤雨溪:Vue 3 将不会支持 IE11
- Vue项目中的mock.js的使用以及基本用法和ES6的新增方法
- 字符串有哪些_vue子组件emit方法失效
- VUE双向绑定原理_vue的数据绑定怎么实现
- vue面试常见考察点总结
- 你知道import Vue from 'vue' 吗?
- vue子组件怎么调用父组件的方法「建议收藏」
- vue 项目启动报错:Syntax Error: Unexpected token 的解决方法
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- vue源码分析-响应式系统(二)_2023-02-28
- 常见经典vue面试题(面试必问)
- springboot和vue交互产生跨域问题的解决办法(后端解决方法)
- ruoyi-vue版本(四)@PreAuthorize 注解在若依里面的作用,springsecurity 框架相关的配置
- vue 获取 DOM 元素的方法
- React和Vue谁会淘汰谁?
- 前端常考vue面试题(必备)_2023-03-15
- 如何在H5页面或者移动端Uniapp/vue中接入在线客服系统,h5客服系统的接入方法