elementUI中的el-select全选
<template> <el-select class="handle-select" size="mini" v-model="Bank" clearable multiple collapse-tags @change="selectAll" @focus="setBank"> <el-option v-for="item in Banks" :key="item.value" :label="item.value" :value="item.value" > </el-option> </el-select> </template>
data() {
return {
bank: [],
banks: [
{
"id": "0",
"value": "全选"
},
{
"id": "1",
"value": "农行"
},
{
"id": "2",
"value": "工行"
},
{
"id": "3",
"value": "建行"
},
{
"id": "4",
"value": "中信"
},
{
"id": "5",
"value": "招行"
},
{
"id": "6",
"value": "邮政"
},
{
"id": "7",
"value": "平安"
},
{
"id": "8",
"value": "支付宝"
},
{
"id": "9",
"value": "微信"
},
{
"id": "10",
"value": "云闪付"
},
{
"id": "11",
"value": "浦发"
},
{
"id": "12",
"value": "华夏"
}
]
};
}
// 给el-select添加change事件 // oldSearchBankType 存储上一次的值 selectAll(val) { let allValues = []; for (const item of this.Banks) { allValues.push(item.value); } let oldVal = this.oldSearchBankType.length === 1 ? this.oldSearchBankType : []; if (val.includes('全选')) { console.log(allValues); this.Bank = allValues; oldVal = this.Bank; } if (this.oldSearchBankType.includes('全选') && val.includes('全选')) { if (val.length === 1) this.Bank = []; else { const index = val.indexOf('全选'); val.splice(index, 1); // 排除全选选项 this.Bank = val; } oldVal = this.Bank; } if (!this.oldSearchBankType.includes('全选') && !val.includes('全选')) { if (val.length === allValues.length - 1) { this.Bank = ['全选'].concat(val); oldVal = this.Bank; } } this.oldSearchBankType = oldVal; }