控制checkbox最多只能选两个,限制选择个数(函数实现)
vue项目用函数实现 限制checkbox最多选个数
·
分为几种情况
1.最多选两个,选择两个后checkbox禁用,取消已选两个中的某一个checkbox继续使用
2.没有选择的情况下点击全选默认选中第一个第二个
3.已经选了一个的情况下点击全选默认增加第一个进入被选,如果正好已选择的是第一项就默认增加第二个进入被选
4.当选够两个的时候全选框被选中,取消其中一个或者全部取消的时候全选框也被取消
<template>
//全选框
<el-checkbox style="text-align: center;" v-model="checkAll"
@change="checkedAll" :max="max" />
//单选框
<el-checkbox style="text-align: center;" v-model="item.checked"
@change="isChecked"
:disabled="item.disabled" />
</template>
<script>
data() {
return {
checkAll: false,
}
},
methods: {
//下面代码中出现的tableData是借口拿回来的数据 可以根据自己的数据改
checkedAll() {
let flag = 0
this.tableData.forEach(item => {
if (item.checked) flag++
});
//没有的情况下 默认选择前两个
if (flag === 0) {
this.tableData[0].checked = this.checkAll
this.tableData[1].checked = this.checkAll
}
//已经有一个的情况下 点击全选默认再加第一个 如果第一个已经选了就顺延默认再加第二个
else if (flag === 1) {
if (this.tableData[0].checked) {
this.tableData[1].checked = this.checkAll
} else {
this.tableData[0].checked = this.checkAll
}
}
//取消全选的时候全部取消
else {
this.tableData.forEach(item => {
item.checked = false
});
}
this.isChecked()
},
isChecked() {
///全选被手动一个个选中触发后,按钮也被触发
let flag = 0
this.tableData.forEach(item => {
if (item.checked) flag++
});
if (flag === 2) {
this.checkAll = true
} else {
this.checkAll = false
}
let arr = []
this.tableData.forEach(item => {
if (item.checked) {
arr.push(item)
}
})
//超过两个禁用checkbox
if (arr.length >= 2) {
this.$message({
message: '最多只能选择两个应用哦~',
type: 'warning'
});
this.tableData.forEach(item => {
if (!item.checked) {
item.disabled = true
}
})
} else {
this.tableData.forEach(item => {
if (!item.checked) {
item.disabled = false
}
})
}
if (arr.length <= 2) {
if (arr.length === 0) {
this.$store.commit('global/tableSelect', null)
}
else {
this.$store.commit('global/tableSelect', arr)
}
}
},
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)