vue + element 多组多选框共同限制选择总数
vue + element 多组多选框共同限制选择总数
-
- 实在不知道写什么了，随便写写勿喷，复制粘贴即可使用，el-tag样式自己改
- 先看效果
-
- 思路：使用element自带的max属性，然后再改造一下即可
- 页面
- data
- 函数
- style 随便写写
实在不知道写什么了，随便写写勿喷，复制粘贴即可使用，el-tag样式自己改
先看效果
如果等于20条的话，那么这三组选择框剩下的都要变成禁用状态
然后取消选中1条，三组都会变成可选状态
思路：使用element自带的max属性，然后再改造一下即可
页面
<el-row :gutter="20">
<el-col :span="4">
<div class="block_title" style="height: 359px">
<span>试题选择</span>
</div>
</el-col>
<el-col :span="20" style="border: none">
<el-row class="STXZ" :gutter="20" style="margin: 0">
<el-col :span="8" style="height: 361px">
<div class="block" style="height: 150px">
<p style="padding-left: 20px">
单选题
</p>
<el-checkbox-group
@change="choose1_change"
v-model="choose1"
:max="choose1_max"
>
<el-row
:gutter="20"
class="noMargin scorll"
style="height: 310px"
>
<el-col
:span="24"
v-for="item in choose1_ti"
:key="item.id"
class="noBorder left lineheight"
>
<el-checkbox :key="item.id" :label="item.id">
{{ item.title }}
</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
</div>
</el-col>
<el-col :span="8" style="height: 361px">
<div class="block" style="height: 150px">
<p style="padding-left: 20px">
多选题
</p>
<el-checkbox-group
@change="choose2_change"
v-model="choose2"
:max="choose2_max"
>
<el-row
:gutter="20"
class="noMargin scorll"
style="height: 310px"
>
<el-col
:span="24"
v-for="item in choose2_ti"
:key="item.id"
class="noBorder left lineheight"
>
<el-checkbox :key="item.id" :label="item.id">
{{ item.title }}
</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
</div>
</el-col>
<el-col :span="8" style="height: 361px">
<div class="block" style="height: 150px">
<p style="padding-left: 20px">
判断题
</p>
<el-checkbox-group
@change="choose3_change"
v-model="choose3"
:max="choose3_max"
>
<el-row
:gutter="20"
class="noMargin scorll"
style="height: 310px"
>
<el-col
:span="24"
v-for="item in choose3_ti"
:key="item.id"
class="noBorder left lineheight"
>
<el-checkbox :key="item.id" :label="item.id">
{{ item.title }}
</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="4">
<div class="block_title" style="height: 359px">
<span>已选试题 </span>
<p>{{ ti_count }} 道</p>
</div>
</el-col>
<el-col :span="20" style="border: none">
<el-row :gutter="20" style="margin: 0">
<el-col :span="8" style="height: 361px">
<div
class="block"
v-if="choose1_ti_select.length !== 0"
style="height: 150px; padding-top: 5px"
>
<el-tag
@close="handleClose1(item)"
class="myTag"
v-for="item in choose1_ti_select"
:key="item.id"
closable
>
{{ item.title }}
</el-tag>
</div>
<div v-else style="text-align: center; line-height: 361px">
请选择单选题
</div>
</el-col>
<el-col :span="8" style="height: 361px">
<div
class="block"
v-if="choose2_ti_select.length !== 0"
style="height: 150px; padding-top: 5px"
>
<el-tag
@close="handleClose2(item)"
class="myTag"
v-for="item in choose2_ti_select"
:key="item.id"
closable
>
{{ item.title }}
</el-tag>
</div>
<div v-else style="text-align: center; line-height: 361px">
请选择多选题
</div>
</el-col>
<el-col :span="8" style="height: 361px">
<div
class="block"
v-if="choose3_ti_select.length !== 0"
style="height: 150px; padding-top: 5px"
>
<el-tag
@close="handleClose3(item)"
class="myTag"
v-for="item in choose3_ti_select"
:key="item.id"
closable
>
{{ item.title }}
</el-tag>
</div>
<div v-else style="text-align: center; line-height: 361px">
请选择判断题
</div>
</el-col>
</el-row>
</el-col>
</el-row>
反正就是给3组多选框绑change事件，然后el-tag绑关闭事件，然后再定义几个绑定的值
data
choose1_ti: [], //循环的题
choose1_max: 1000, //最大选择数
choose1_ti_select: [], //选择后的题
choose2_ti: [],
choose2_max: 1000,
choose2_ti_select: [],
choose3_ti: [],
choose3_max: 1000,
choose3_ti_select: [],
choose1: [], //choose1 el-tag循环的数组
choose2: [],
choose3: [],
value5: 20, //限制三组一共可以选择20条
ti_count: 0, //一共选了多少道题
函数
created
随便写写，不用在意这些细节，到时候把id什么的换成后端穿给你的就好
this.choose1_ti = [
{
id: 1,
title: '第一题￥&%￥￥#*%',
},
{
id: 2,
title: 'B',
},
{
id: 3,
title: 'C',
},
{
id: 4,
title: 'D',
},
{
id: 5,
title: 'E',
},
{
id: 6,
title: 'F',
},
{
id: 7,
title: 'G',
},
{
id: 8,
title: 'H',
},
{
id: 9,
title: 'I',
},
{
id: 10,
title: 'J',
},
{
id: 11,
title: 'K',
},
{
id: 12,
title: 'L',
},
{
id: 13,
title: 'M',
},
]
this.choose2_ti = [
{
id: 1,
title: 'A',
},
{
id: 2,
title: 'B',
},
{
id: 3,
title: 'C',
},
{
id: 4,
title: 'D',
},
{
id: 5,
title: 'E',
},
{
id: 6,
title: 'F',
},
{
id: 7,
title: 'G',
},
{
id: 8,
title: 'H',
},
{
id: 9,
title: 'I',
},
{
id: 10,
title: 'J',
},
{
id: 11,
title: 'K',
},
{
id: 12,
title: 'L',
},
{
id: 13,
title: 'M',
},
]
this.choose3_ti = [
{
id: 1,
title: 'A',
},
{
id: 2,
title: 'B',
},
{
id: 3,
title: 'C',
},
{
id: 4,
title: 'D',
},
{
id: 5,
title: 'E',
},
{
id: 6,
title: 'F',
},
{
id: 7,
title: 'G',
},
{
id: 8,
title: 'H',
},
{
id: 9,
title: 'I',
},
{
id: 10,
title: 'J',
},
{
id: 11,
title: 'K',
},
{
id: 12,
title: 'L',
},
{
id: 13,
title: 'M',
},
]
给choose1_ti，choose2_ti，choose3_ti这三组赋值，然后循环显示，然后还有一个判断他们三个是否超过了总数限制的主函数
methods:
//第一组选中事件
choose1_change() {
var json_ti = this.choose1_ti
var json_select = this.choose1
var result = json_ti.filter(function (v) {
return json_select.indexOf(v.id) !== -1 // 利用filter方法来遍历是否有相同的元素
})
this.choose1_ti_select = result
this.ti_count =
this.choose1_ti_select.length +
this.choose2_ti_select.length +
this.choose3_ti_select.length
this.disableChoose()
},
//第二组选中事件
choose2_change() {
var json_ti = this.choose2_ti
var json_select = this.choose2
var result = json_ti.filter(function (v) {
return json_select.indexOf(v.id) !== -1 // 利用filter方法来遍历是否有相同的元素
})
console.log(result)
this.choose2_ti_select = result
this.ti_count =
this.choose1_ti_select.length +
this.choose2_ti_select.length +
this.choose3_ti_select.length
this.disableChoose()
},
//第三组选中事件
choose3_change() {
var json_ti = this.choose3_ti
var json_select = this.choose3
var result = json_ti.filter(function (v) {
return json_select.indexOf(v.id) !== -1 // 利用filter方法来遍历是否有相同的元素
})
console.log(result)
this.choose3_ti_select = result
this.ti_count =
this.choose1_ti_select.length +
this.choose2_ti_select.length +
this.choose3_ti_select.length
this.disableChoose()
},
//判断这三组多选框是否禁用
disableChoose() {
var json_ti1 = this.choose1_ti
var json_select1 = this.choose1
var json_ti2 = this.choose2_ti
var json_select2 = this.choose2
var json_ti3 = this.choose3_ti
var json_select3 = this.choose3
var result1 = json_ti1.filter(function (v) {
return json_select1.indexOf(v.id) !== -1 // 利用filter方法来遍历是否有相同的元素
})
var result2 = json_ti2.filter(function (v) {
return json_select2.indexOf(v.id) !== -1 // 利用filter方法来遍历是否有相同的元素
})
var result3 = json_ti3.filter(function (v) {
return json_select3.indexOf(v.id) !== -1 // 利用filter方法来遍历是否有相同的元素
})
if (this.ti_count == this.value5) {
this.choose1_max = result1.length
this.choose2_max = result2.length
this.choose3_max = result3.length
if (this.choose1_max == 0) {
this.choose1_max = -1 //如果等于0，那么页面样式会很怪，可以注掉这3个if看一下效果
}
if (this.choose2_max == 0) {
this.choose2_max = -1
}
if (this.choose3_max == 0) {
this.choose3_max = -1
}
} else {
this.choose1_max = 1000
this.choose2_max = 1000
this.choose3_max = 1000
}
},
//第一组tag关闭时触发事件
handleClose1(item) {
this.choose1.splice(
this.choose1.findIndex((items) => items === item.id),
1
)
this.choose1_ti_select.splice(
this.choose1_ti_select.findIndex((items) => items.id === item.id),
1
)
this.ti_count =
this.choose1_ti_select.length +
this.choose2_ti_select.length +
this.choose3_ti_select.length
this.disableChoose()
},
//第二组tag关闭时触发事件
handleClose2(item) {
this.choose2.splice(
this.choose2.findIndex((items) => items === item.id),
1
)
this.choose2_ti_select.splice(
this.choose2_ti_select.findIndex((items) => items.id === item.id),
1
)
this.ti_count =
this.choose1_ti_select.length +
this.choose2_ti_select.length +
this.choose3_ti_select.length
this.disableChoose()
},
//第三组tag关闭时触发事件
handleClose3(item) {
this.choose3.splice(
this.choose3.findIndex((items) => items === item.id),
1
)
this.choose3_ti_select.splice(
this.choose3_ti_select.findIndex((items) => items.id === item.id),
1
)
this.ti_count =
this.choose1_ti_select.length +
this.choose2_ti_select.length +
this.choose3_ti_select.length
this.disableChoose()
},
style 随便写写
.block {
height: 50px;
line-height: 50px;
.el-checkbox {
display: inline-block;
margin: 0 20px;
}
.el-radio {
display: inline-block;
margin: 0 20px;
line-height: 55px;
height: 55px;
// height: 30px;
// line-height: 30px;
}
}
.block_title {
height: 50px;
background: #f2f2f2;
text-align: center;
line-height: 50px;
}
.select_ti {
margin-top: 20px;
.el-col {
padding: 0 !important;
border: 1px solid #cfcfcf;
}
}
.noBorder {
border: none !important;
text-align: center;
}
.noBorder.left {
border: none !important;
text-align: left;
// height: 30px;
// line-height: 30px;
.el-checkbox {
display: block !important;
}
}
.noBorder.left.lineheight {
line-height: 35px;
margin-bottom: 10px;
}
.noMargin.scorll {
overflow: auto;
height: 360px;
}
.noMargin {
margin: 0 !important;
}
//这些放在全局样式中，局部不生效
.myTag{
display: block;
width: 330px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
background: none;
border: none;
padding-left: 30px;
}
.myTag i{
position: absolute !important;
left: 7px !important;
top: 7px !important;
}