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; }
原文地址:https://www.cnblogs.com/sloanlv/p/11127409.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。