多选框 最多 选择2个element ui
当勾选第三个时
默认取消第一个勾选
<template>
<div id="app">
<el-checkbox :label="item.name" v-model="item.checked" v-for="(item,i) in ziArr" :key="i" @change="change(item,i)"> </el-checkbox>
<p>count: {{count}}</p>
<p>ids: {{ids}}</p>
</div>
</template>
<script>
export default {
data () {
return {
ziArr:[{
name:'A',
checked:false
},
{
name:'B',
checked:false
},
{
name:'C',
checked:false
},
{
name:'D',
checked:false
}],
checkList: [],
count:0,
ids:[],
};
},
methods:{
change(item,i){
if(item.checked) {
this.count++;
this.ids.push(item.name)
} else{
this.count--;
this.ids.forEach((li,a) => {
if (li == item.name) {
this.ids.splice(0,1)
}
})
}
if(this.count > 2) {
this.ziArr.forEach((li,a) => {
console.log(li.name == this.ids[0])
if(li.name == this.ids[0]) {
this.ziArr[a].checked = false;
this.count--;
}
})
this.ids.shift()
}
}
}
}
</script>
<style lang="less" scoped>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center; */
color: #2c3e50;
// overflow: hidden;
// overflow-y: scroll;
// height: 100vh;
}
</style>