el-select多选全选

<template><div><el-select @change="handleSelect($event)" v-model="selectVal" placeholder="请选择" multiple collapse-tags><el-optionv-for="item in array":key="item.value":label="item.label":value="item.value"></el-option></el-select><div>{{this.selectVal}}</div></div>
</template><script>
export default {name: 'selectMultiple',data () {return {array: [],selectVal: [],oldSelectVal: []}},mounted () {this.initSelect()},methods: {initSelect () {this.array = [{label: '全部', value: 'ALL'}]for (let i = 0; i < 10; i++) {this.array.push({label: '选择项' + i,value: i})}},handleSelect (val) {let selectVal = this.selectVallet oldSelectVal = this.oldSelectVallet arr = this.arraylet allValues = []// 保留所有值for (let item of arr) {allValues.push(item.value)}if (val.includes('ALL')) {if (!oldSelectVal.includes('ALL')) {// 全选selectVal = allValues} else {// 之前全选，点击非全选项，排除全选const index = val.indexOf('ALL')val.splice(index, 1)selectVal = val}} else {if (oldSelectVal.includes('ALL')) {// 取消全选selectVal = []} else if (allValues.length - 1 === val.length) {// 全选没选，其他选项全部选上，选中全选selectVal = allValues}}this.selectVal = selectValthis.oldSelectVal = selectVal}}
}
</script>

el-select多选全选相关推荐

vue 带全选和多选的表格怎么写_vue实现下拉列表多选全选以及模糊查询的vue组件...
vue实现下拉列表多选全选以及模糊查询的vue组件发布时间:2018-09-12 17:41, 浏览次数:3776 , 标签: vue <>前端,有时有这样的需求,需要一个下拉列表,还要 ...
VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 效果:如红框中部分. 一选全选:表头上的单选框选中则下面每行都选中. 全选一选:表中数据每行都 ...
vue 实现el-select组件配合 el-tabs 完成动态tabs然后有勾选全选，还有模拟提交，回显数据
cv即可使用 <!DOCTYPE html> <!DOCTYPE html> <html lang="en"><head><m ...
JQuery全选反选随其他checkbox自动勾选全选反选
工作中的代码片段写出来留作以后对比参考网上没找到自己想要的全选反选代码干脆自己写了个比较臃肿的相信还有更加简单的方法 jquery代码 ============================ ...
统计订单：复选+全选+计算的列表
话不多说,先上效果图.带选择框和全选按钮的列表,因一些特殊要求还加上些计算功能,这并不是难就是稍微繁琐了些,如 "统计订单功能" 不要说,就是干,那就直接上代码 1,主页面的布局文 ...
计算机快捷键全选,全选快捷键,详细教您电脑全选快捷键是什么
在使用电脑的时候经常会遇到要全选的情况,使用鼠标右键进行全选在频繁使用全选的情况下会影响到编辑的速度,那么全选的快捷键是什么呢?没有使用过的用户就不知道了,下面,小编就来跟大家讲讲电脑全选快捷键. 经 ...
Vue-----table 控件自动勾选全选框2 与tab控件组合使用
页面区别: 代码: // 标签页的切换 tabClick(tab, event) {//获取tabs页的索引this.tabIndex=tab.indexthis.getEffectByProject ...
vue实现div多选全选功能_怎样为你的 Vue.js 单页应用提速
每日前端夜话第323篇翻译:疯狂的技术宅作者:Matthias Sommer 来源:dzone 正文共:1956 字预计阅读时间:10 分钟我有一个项目用了 Vue.js 来构建单页应用程序. ...
select实现多选、全选、全不选
今天使用select下拉框实现了全选,全不选和多选的功能,效果如图: 1.html代码: 为select标签设置multiple属性为true <select id="myselect ...

el-select多选全选

el-select多选全选相关推荐

最新文章

热门文章