我的需求是:只有2个选项。又想使用复选框的样式,自己又不想去改样式。
于是可以用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: ['管理员', '编辑'], //角色列表
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)
}
}