<template>
<div style="margin: 50px;">
<div v-for="(v,i) in arrList" :key="i">
<el-checkbox-group v-model="arrList[i].label" >
<el-checkbox v-for="(item, index) in data" :key="index" :label="item.label" @change="changeCheck($event,item.label,i)">
<div style="margin-bottom: 10px;">{{ item.label }}</div>
</el-checkbox>
</el-checkbox-group>
</div>
<el-button @click="add">添加</el-button>
</div>
</template>
<script>
export default {
data() {
return {
arrList:[
{
label:['不限']
}
],
data: [
{label: '不限'},
{label: '一级'},
{label: '二级'},
{label: '三级',}
],
}
},
methods: {
changeCheck(e,val,ind) {
if(e) {
if(val === '不限') {
this.arrList[ind].label = ['不限'];
}else {
const index = this.arrList[ind].label.findIndex(item => item === '不限');
if(index > -1) {
this.arrList[ind].label.splice(index,1);
}
}
if(this.arrList[ind].label.length>1) {
this.arrList[ind].label.shift()
}
}
},
add(){
let obj = {label:[ '不限']}
this.arrList.push(obj)
}
}
}
</script>
已结题
选中过的框怎么可以禁用
- 写回答
- 好问题 提建议
- 追加酬金
- 关注问题
- 分享
- 邀请回答