当你遇到el-checkbox复选框选择时,它是进行多个选择的,如果我们想单选这个时候我们应该怎么做呢?
这个是多个选择的,如果我们想单选代码怎么写呢
<el-checkbox-group
v-model="formQuery.managementSystem"
@change="handleCheckManagementSystem">
<el-checkbox label="0">暂无</el-checkbox>
<el-checkbox label="1">有</el-checkbox>
</el-checkbox-group>
//script方法
handleCheckManagementSystem(value) {
if(this.formQuery.managementSystem.length > 1) {
this.formQuery.managementSystem.splice(0,1)
}
}
上述的script方法是为了展示formQuery.managementSystem只能存在一个元素
这是最后复选框只能选择一个的效果
再来看一下,怎么让复选框效果回显出来
<el-form ref="form" :model="formQuery" label-width="140px">
<el-form-item label="是否管理">
<el-checkbox-group
v-model="formQuery.managementSystem"
@change="handleCheckManagementSystem">
<el-checkbox label="0">暂无</el-checkbox>
<el-checkbox label="1">有</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="是否展示">
<el-checkbox-group
v-model="formQuery.netRunSafe"
@change="handleCheckNetRunSafe">
<el-checkbox label="0">暂无</el-checkbox>
<el-checkbox label="1">有</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="是否确认">
<el-checkbox-group
v-model="formQuery.netMessageSafe"
@change="handleCheckNetMessageSafe">
<el-checkbox label="0">暂无</el-checkbox>
<el-checkbox label="1">有</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="是否保存">
<el-checkbox-group
v-model="formQuery.warnDispose"
@change="handleCheckWarnDispose">
<el-checkbox label="0">暂无</el-checkbox>
<el-checkbox label="1">有</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<script>
export defalut{
data(){
return {
formQuery:{
managementSystem: [],
netRunSafe: [],
netMessageSafe: [],
warnDispose:[],
},
}
},
methods:{
//回显的方法,怎么让el-checkbox回显关键代码就是
getDetail(){
const params = {
id:this.id
}
getDetail(params).then((result) => {
if(result.result){
this.formQuery.managementSystem = [];
this.formQuery.managementSystem.push(result.resultdata.managementSystem);
this.formQuery.netRunSafe =[];
this.formQuery.netMessageSafe.push(result.resultdata.netMessage)//关键代码
this.formQuery.netMessageSafe=[];
this.formQuery.netMessageSafe.push(result.resultdata.netMessageSafe);//关键代码
this.formQuery.warnDispose=[];
this.formQuery.warnDispose.push(result.resultdata.warnDispose)//关键代码
}
})
},
},
}
<script>
回显效果展示