Element-ui 下拉列表 全选 多选时 select全选 新增一个选择所有的选项
项目里经常会用到，在一个多选下拉框里新增一个选择所有的选项，例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form>
<el-form-item>
<el-select placeholder="请选择活动区域" multiple v-model="citys">
<el-option v-for="item in cities" :label="item.label" :value="item.value" :key="item.value"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el:"#app",
data:{
cities: [
{value: 'Beijing',label: '北京'},
{value: 'Shanghai',label: '上海'},
{value: 'Nanjing',label: '南京'},
{value: 'Chengdu',label: '成都'},
{value: 'Shenzhen',label: '深圳'},
{value: 'Guangzhou',label: '广州'}
],
citys:[]
}
})
</script>
</body>
</html>
渲染如下:
此时可以多选，如果想要选择所有选项时，得一个个去点击，这样不是很方便，我们可以在下拉框里新增一个选择所有的选项，通过watch用几行代码就可以实现与其它选项的互斥来实现一键多选，如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form>
<el-form-item>
<el-select placeholder="请选择活动区域" multiple v-model="citys">
<el-option label="选择所有" value="all"></el-option>
<el-option v-for="item in cities" :label="item.label" :value="item.value" :key="item.value"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el:"#app",
data:{
cities: [
{value: 'Beijing',label: '北京'},
{value: 'Shanghai',label: '上海'},
{value: 'Nanjing',label: '南京'},
{value: 'Chengdu',label: '成都'},
{value: 'Shenzhen',label: '深圳'},
{value: 'Guangzhou',label: '广州'}
],
citys:[]
},
watch:{
citys:function(val,oldval){
let newindex = val.indexOf('all'),oldindex = oldval.indexOf('all'); //获取val和oldval里all的索引,如果没有则返回-1
if(newindex!=-1 && oldindex==-1 && val.length>1) //如果新的选择里有勾选了选择所有选择所有 则 只直线勾选所有整个选项
this.citys=['all'];
else if(newindex!=-1 && oldindex!=-1 && val.length>1) //如果操作前有勾选了选择所有且当前也选中了勾选所有且勾选数量大于1 则移除掉勾选所有
this.citys.splice(val.indexOf('all'),1)
}
}
})
</script>
</body>
</html>
这样就可以互斥了，效果如下:
挺好用的哈
Element-ui 下拉列表 全选 多选时 select全选 新增一个选择所有的选项的更多相关文章
- vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题（转载）
来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...
- Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
- 2016/3/30 租房子 ①建立租房子的增、删、改php页面 ②多条件查询 ③全选时 各部分全选中 任意checkbox不选中 全选checkbox不选中
字符串的另一种写法:<<<AAAA; 后两个AA回车要求顶格 不然报错 例子: <!DOCTYPE html> <html lang="en" ...
- vue结合element-ui 的select 全选问题
下拉列表多选 问题 通过操作 所有来进行全选 全不选问题 element-ui 中 select 记录下自己最近使用element-ui 中的 select多选问题 在element中默认是指单纯多选 ...
- element ui 表格提交时获取所有选中的checkbox的数据
<el-table ref="multipleTable" :data="appList" @selection-change="changeF ...
- vue element select多选回显
我们经常在使用 Element组件里面的 select多选 场景:添加账号的时候需要选择可见分公司(分公司为多选),添加成功之后可以编辑,需要回显添加时所提交的分公司 代码如下: 多选框: data( ...
- Android开发CheckBox控件，全选，反选，取消全选
在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...
随机推荐
- LeetCode | 机器人能否返回原点
放假的时间已经过去一半了,每天坚持看一个多小时的书,时间虽然不多,但是能专心把书看进去就可以了.今天分享的是 LeetCode 上面的第 657 题,题目是<机器人能否返回原点>,这也是一 ...
- 开发常用Git/Linux/idea命令快捷键总结（持续更新）
在开发过程中,会使用越来越多的命令,或快捷键,来帮助我们提高工作效率.本文记录了我在平时积累的常用命令,分享给大家. git命令 基本命令 set LESSCHARSET=utf-8 --idea T ...
- vs2017 发布工具 Installer 发包遇到的问题处理
一. 遇到的问题. ERROR: 要在“系统必备”对话框中启用“从与我的应用程序相同的位置下载系统必备组件”,必须将“Microsoft .NET Framework 4.7.2 (x86 和 x64 ...
- SpringMVC学习笔记一（请求流程和配置，启动项目）
springmvc请求流程: 1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器. 3.处理器映 ...
- js清除定时器注意点
如何这篇文章所述:https://www.cnblogs.com/mmykdbc/p/7418575.html js多次调用创建定时器的函数,会使定时器速度越来越快,多次调用定时器的使用场景比如:监听 ...
- 区块链社交APP协议分析：Qbao
- Qbao是什么 - Qbao报文情况 本节我们开始使用Qbao软件,并抓取其报文进行分析. 对APP进行协议分析抓包的一般过程是: 1.打开抓包APP进行抓包: 2.打开APP开始使用: 3.对每 ...
- Android 7.0新特性
还望支持个人博客站:http://www.enjoytoday.cn 由于google目前不是无法直接在国内访问,故此,对于android 开发平台的7.0新特性做个保存.也可供大家查阅.原文转自an ...
- FastJSON使用例子
FastjsonTest.java package demo; import java.util.ArrayList; import java.util.Date; import java.util. ...
- SpringBoot+Thyemelaf开发环境正常，打包jar发到服务器就报错Template might not exist or might not be accessible
这里说一下Thyemelaf的巨坑 写了一个SpringBoot+Thyemelaf的项目,并不是前后端分离.今天想放到linux服务器上玩玩,打成jar包,然后一运行他妈居然报错了,报了一个Temp ...
- Saltstack_使用指南11_配置管理-状态之间依赖关系
1. 说明 下文的案例是根据上一篇文章进行的修改.因此请优先读取上一篇文章内容<Saltstack_10_配置管理-状态模块> 并且目录进行了变化,从 /srv/salt/lamp 变为了 ...