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寒假集训Day5小结 线段树 树状数组

    线段树 什么时候用线段树 1.统计量可合并 2.修改量可合并 3.通过统计量可直接修改统计量 一句话:满足区间加法即可使用线段树维护信息 理解Lazy Tage 蓝色是要把信息及时维护的节点,红色是本 ...

  2. Javascript里EQ、NE、GT、LT、GE、LE含义

    EQ 就是 EQUAL等于 NE就是 NOT EQUAL不等于 GT 就是 GREATER THAN大于  LT 就是 LESS THAN小于 GE 就是 GREATER THAN OR EQUAL ...

  3. Django项目同步到码云

    本篇博客主要记录下将刚刚初始化后的Django项目部署到码云中,首先我们需要到码云中注册一个账号,下面会讲解下如何在码云中建立一个仓库,再将其克隆到本地.最后将本地的项目推送到码云的仓库中. 码云内初 ...

  4. 三分钟入坑指北 🔜 Docsify + Serverless Framework 快速创建个人博客系统

    之前由于学摄影的关系,为了提高自己的审美,顺便锻炼下自己的英文能力,翻译了不少国外艺术类的 文章.最近一直想搭一个个人博客来存放这些内容,又懒得折腾建站,遂一直搁置. 直到偶然发现了 docsify ...

  5. Cookie API和记录上次来访时间

    1.什么是Cookie? Cookie是一种会话技术,用千将会话过程中的数据保存到用户的浏览器中,从而使浏览器和服务器可以更好地进行数据交互. 在现实生活中,当顾客在购物时,商城经常会赠送顾客一张会员 ...

  6. 安装adobe reader阅读器

    首先  在我的网盘里有那个软件. 安装的教程在这个歌网址:http://www.zhanshaoyi.com/6730.html

  7. ab工具压接口的时候post传参问题

    ab  -n 10000 -c 40 -p  [参数所在文件] -T 'application/json'  http://xxx 以上命令, 压测需要post json格式的参数的api时, 一定注 ...

  8. java链接redis服务器

    1.首先你需要下载驱动包jedis.jar确保下载最新驱动包. 2.public class RedisUtil { //服务器IP地址 private static String ADDR = &q ...

  9. share团队冲刺2

    团队冲刺第二天 昨天:在网上学习app开发的简单操作代码,实现了简单的输出界面,学会了添加按钮控件. 今天:继续昨天的进度,先进行登陆界面窗口的制作. 问题:目前只能在activity添加简单代码,复 ...

  10. css改变input输入框placeholder值颜色

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Fi ...