elementUI的select全选
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全选的更多相关文章
- vue结合element-ui 的select 全选问题
下拉列表多选 问题 通过操作 所有来进行全选 全不选问题 element-ui 中 select 记录下自己最近使用element-ui 中的 select多选问题 在element中默认是指单纯多选 ...
- ElementUi 表格取消全选框,用文字表示
Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 <el-table v-loading="zongShipLoading&q ...
- elementUI+JS实现全选与反选
在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...
- element-ui table 默认全选
来自: https://juejin.im/post/5cf24f1ee51d4577583ddc77 侵删 this.deviceTableData = res.body || []; // con ...
- element-ui组件,全选树节点,新增数据子节点数据,出现回填问题
案情分析:全选后父节点被选中保存,在这个树节点下新增数据时,就会出现,也被选中,事实上数据是没有被选中,也就意味着权限未被配置,而显示是已经配置了,显然这个是一个bug 1.处理前,直接用下面的方法很 ...
- Element-ui 下拉列表 全选 多选时 select全选 新增一个选择所有的选项
项目里经常会用到,在一个多选下拉框里新增一个选择所有的选项,例如: <!DOCTYPE html> <html lang="en"> <head> ...
- jquery checkbox 选中 全选 插件
checkbox 选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...
- 微信小程序全选多选效果
效果图: 代码: wxml <view class='hei_top'> <view class='hei_p'>共 <text>4</text> 场& ...
- jQuery_完成复选框的全选与全不选
别的不多说,直接上代码,用于完成复选框的全选与全不选. <!DOCTYPE html> <html> <head> <meta charset="U ...
随机推荐
- 【机器学习实战学习笔记(1-1)】k-近邻算法原理及python实现
笔者本人是个初入机器学习的小白,主要是想把学习过程中的大概知识和自己的一些经验写下来跟大家分享,也可以加强自己的记忆,有不足的地方还望小伙伴们批评指正,点赞评论走起来~ 文章目录 1.k-近邻算法概述 ...
- Swift之分割视图控制器-UISplitViewController
Swift之分割视图控制器-UISplitViewController UISplitViewController这种控制器只能用于iPad,它可以在iPad屏幕中显示两个不同的场景:在横向模式下,左 ...
- 201903-2 二十四点 Java
思路: 数据结构中,栈可以解决运算的问题.利用压栈和弹栈操作实现(这里用队列模拟).具体的: 遇到乘除号,弹出栈顶元素,将计算结果压入栈中.遇到加减号,将后面的数一起压入栈中. 注意: substri ...
- 201809-2 买菜 Java
思路: 顺序读入,例如:小H装车的时间段为[1,3],小W装车的时间段为[2,4],重叠部分为[2,3],记在数组times[2]中.最后输出时判断数组times中值大于1的(其实就是2),即为重叠部 ...
- (递归)Hanoi Tower
#include<stdio.h>void move(int n,char a,char b){ printf("将第%d个盘子从%c移动到%c\n",n,a,b); ...
- Spring创建Bean的顺序
一直对Spring创建bean的顺序很好奇,现在总算有时间写个代码测试一下.不想看过程的小伙伴可以直接看结论 目录结构: 其中:bean4.bean5包下的class没有注解@Component,测试 ...
- Mybatis实现增删改查(二)
1. 准备 请先完成Mybatis基本配置(一)的基本内容 2. 查询多条商品信息 1)在com.mybatis.dao.PartDao中增加接口函数 public List<PartInfo& ...
- Mybatix实现in查询(五)
在这一节,我们要向大家介绍一下在Mybatis中想要实现in查询,Mapper文件应该怎么配置. 1)在com.mybatis.dao.PartDao中增加接口函数 public List<Pa ...
- OpenMP笔记(五)
任务调度主要用于并行的for循环中,当循环中每次迭代的计算量不相等时,如果简单地给各个线程分配相同次数的迭代的话,会造成各个线程计算负载不均衡,这会使得有些线程先执行完,有些后执行完,造成某些CPU核 ...
- (一)ORBSLAM2主要配置
(1)ORBSLAM2文件夹里面有个build.sh文件,里面主要是编译时终端需要执行的命令,这里把它们放到.sh文件中统一执行. (2)阅读ORBSLAM2的CmakeList可以知道运行ORBSL ...