elementui checkBox 实现单选效果且不禁用其他选项
<template>
<div id="app">
<el-row :gutter="20">
<el-col :span="6">
<el-checkbox v-for="(item,key) in checkBoxList" :key="key" :true-label="" false-label="" v-model="checkedObj[]" @change="change">{{}}</el-checkbox>
</el-col>
<el-col :span="6">
</el-col>
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
checkedObj: {
checked: "",
checked1:"",
checked2:"",
checked3:""
},
checkBoxList:[
{
model: "checked",
text:"元",
truelabel: "0"
},
{
model: "checked1",
text:"万元",
truelabel: "1"
},
{
model: "checked2",
text:"百元",
truelabel: "2"
},
{
model: "checked3",
text:"亿元",
truelabel: "3"
},
]
};
},
methods: {
change(val) {
if (val) {
// 获取当前选中的checkbox绑定的值
const currentModel = this.checkBoxList.filter(v => v.truelabel === val)[0].model
// 将不是当前绑定值的值清空
for (const i in this.checkedObj) {
if (i !== currentModel) {
this.checkedObj[i] = ""
}
}
}
}
}
};
</script>