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; }