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

elementUI的select全选的更多相关文章

  1. vue结合element-ui 的select 全选问题

    下拉列表多选 问题 通过操作 所有来进行全选 全不选问题 element-ui 中 select 记录下自己最近使用element-ui 中的 select多选问题 在element中默认是指单纯多选 ...

  2. ElementUi 表格取消全选框,用文字表示

    Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 <el-table v-loading="zongShipLoading&q ...

  3. elementUI+JS实现全选与反选

    在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...

  4. element-ui table 默认全选

    来自: https://juejin.im/post/5cf24f1ee51d4577583ddc77 侵删 this.deviceTableData = res.body || []; // con ...

  5. element-ui组件,全选树节点,新增数据子节点数据,出现回填问题

    案情分析:全选后父节点被选中保存,在这个树节点下新增数据时,就会出现,也被选中,事实上数据是没有被选中,也就意味着权限未被配置,而显示是已经配置了,显然这个是一个bug 1.处理前,直接用下面的方法很 ...

  6. Element-ui 下拉列表 全选 多选时 select全选 新增一个选择所有的选项

    项目里经常会用到,在一个多选下拉框里新增一个选择所有的选项,例如: <!DOCTYPE html> <html lang="en"> <head> ...

  7. jquery checkbox 选中 全选 插件

    checkbox  选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...

  8. 微信小程序全选多选效果

    效果图: 代码: wxml <view class='hei_top'> <view class='hei_p'>共 <text>4</text> 场& ...

  9. jQuery_完成复选框的全选与全不选

    别的不多说,直接上代码,用于完成复选框的全选与全不选. <!DOCTYPE html> <html> <head> <meta charset="U ...

随机推荐

  1. HZNU-ACM寒假集训Day2小结 二分答案

    Day2 ---二分 这里直接给出模板 两种对应不同的情况 可以借助数轴理解 int bsearch_1(int l, int r) { while (l < r) { ; if (check( ...

  2. Android自定义View——实现字母导航栏

    1.自定义View实现字母导航栏 2.ListView实现联系人列表 3.字母导航栏滑动事件处理 4.字母导航栏与中间字母的联动 5.字母导航栏与ListView的联动 1.先看主布局,方便后面代码的 ...

  3. UML-持久框架-目标&关键思想

    1.目标 1).使用模板方法.状态模式.命令模式来设计部分框架 2).介绍对象-关系(O-R)映射中的一些问题 3).使用虚代理实现的滞后具体化 2.关键思想 1).映射(Mapping) 类--表 ...

  4. C++逐词读取txt

    这一篇来写下std::ifstream读取txt的另一种方式,逐词读取,上一篇是按行读取,逐词读取的话每个单词都以空格或者换行等符号间隔开. 代码如下: #include "stdafx.h ...

  5. nginx反向代理和负载均衡的实现

    反向代理和负载均衡的关系可以理解为,一个ip的负载均衡就是反向代理. 反向代理使用的是:proxy_pass指令   负载均衡使用的是:proxy_pass指令+upstream指令 负载均衡的3中方 ...

  6. java课程之团队开发之用户模板和用户场景

    用户模板与用户场景: 姓名:孙某 性别年龄:男 19岁 职业;学生 收入:无 知识层次能力:大学生,用电脑熟练. 生活/工作状况:正常进行上课,学霸. 动机目的,困难:喜欢依据自己的兴趣进行学习. 用 ...

  7. 学会拒绝,是一种智慧——OO电梯章节优化框架的思考

    在本章的三次作业里,每次作业我都有一个主题,分别是:托盘型共享数据.单步电梯运行优化.多部电梯运行优化,因而电梯优化实际是第二.三次作业.虽然后两次作业从性能分上看做得还不错,但阅读其他大佬博客,我深 ...

  8. 数组分组(DP)

    一个长度为n的数组a,我们可以把它分成任意组,每一组是一段连续的区间. 比如数组1,2,3,4,5可以分成(1,2),(3,4,5)两个组.每个分组都有一个权值,这个权值就是分组里面每个数的乘积对10 ...

  9. 吴裕雄--天生自然 JAVASCRIPT开发学习: 变量提升

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. JAVA课程设计——俄罗斯方块(团队)

    1.团队介绍 1.1 团名:终于可以回家了嗷嗷嗷 1.2 团员介绍 2.参考来源 https://www.jb51.net/article/142716.htm 3.项目git地址 https://g ...