el-select 下拉框多选实现全选

在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些

方法一：下拉项增加一个【全选】，然后应该有以下几种情况：

1.下拉选项全都勾选时，【全选】自动勾选；

2.下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；

3.下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选；

4.下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；

html部分：

<template><el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' @remove-tag='removeTag' placeholder='请选择'><el-option label='全选' value='全选' @click.native='selectAll'></el-option><el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option></el-select>
</template>

js部分：

export default {data() {return {selectedArray: [],options: [{ name: '一一', label: 'one' },{ name: '二二', label: 'tow' },{ name: '三三', label: 'three' },{ name: '四四', label: 'four' },{ name: '五五', label: 'five' }]}},methods: {selectAll() {if (this.selectedArray.length < this.options.length) {this.selectedArray = []this.options.map((item) => {this.selectedArray.push(item.name)})this.selectedArray.unshift('全选')} else {this.selectedArray = []}},changeSelect(val) {if (!val.includes('全选') && val.length === this.options.length) {this.selectedArray.unshift('全选')} else if (val.includes('全选') && (val.length - 1) < this.options.length) {this.selectedArray = this.selectedArray.filter((item) => {return item !== '全选'})}},removeTag(val) {if (val === '全选') {this.selectedArray = []}}}
}

看效果

方法二：直接添加一个【全选】复选框，实现的功能跟方法一是一样的

html部分：

<template><el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' placeholder='请选择'><el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox><el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option></el-select>
</template>

js部分

export default {data() {return {checked: false,selectedArray: [],options: [{ name: '一一', label: 'one' },{ name: '二二', label: 'tow' },{ name: '三三', label: 'three' },{ name: '四四', label: 'four' },{ name: '五五', label: 'five' }]}},methods: {selectAll() {this.selectedArray = []if (this.checked) {this.options.map((item) => {this.selectedArray.push(item.name)})} else {this.selectedArray = []}},changeSelect(val) {if (val.length === this.options.length) {this.checked = true} else {this.checked = false}}}
}

css部分

.el-checkbox {text-align: right;width: 100%;padding-right: 10px;}

效果图

el-select 下拉框多选实现全选相关推荐

html设置下拉筛选可以多选,select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
ajax多选下拉,模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）(示例代码)...
模拟select下拉框之多选 }ul,li{list-style:none; }#test{margin:20px 10px; }.clearfix:before, .clearfix:after{c ...
select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
Layui实现动态生成select中的option项,同时设置select下拉框选中项
项目场景: 主要用于为民族select下拉框动态生成option值,同时在实现编辑功能时,表单中的select下拉框的选中项为后台传过来的数据. 举例: 如下图所示的表单内容,下图的民族和政治面貌se ...
判断select下拉框是否有选,并给下拉框赋值
使用select下拉框时,错误写法 var sex = $('#sex').val(); alert(sex); //弹出的是:nullif(sex==""){alert(&quo ...
layui怎么给下拉框赋值_layui给select下拉框赋值
转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...
Vue中select下拉框的默认选中项的三种情况
在Vue中使用select下拉框主要靠的是 v-model 来绑定选项 option 的 value 值. select下拉框在界面的展示,我们都希望看到框中有一个值而不是空白,比如显示 &qu ...
设置select下拉框不可修改的→“四”←种方法
设置select下拉框为不可修改的几种方法: 因为select的特殊性,导致它不能像input表单一样简单地设置一个readonly来限制修改,所以,我们需要进行别的操作! 1.为下拉框添加样式,可以 ...
php 获取下拉框选中的文本,jQuery实现select下拉框获取当前选中的文本
本文主要介绍了jQuery实现select下拉框获取当前选中文本.值.索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 话不多 ...
vue 的elementui中select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了, ...

el-select 下拉框多选实现全选

在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些

方法一：下拉项增加一个【全选】，然后应该有以下几种情况：

1.下拉选项全都勾选时，【全选】自动勾选；

2.下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；

3.下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选；

4.下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；

html部分：

js部分：

看效果

方法二：直接添加一个【全选】复选框，实现的功能跟方法一是一样的

html部分：

js部分

css部分

效果图

el-select 下拉框多选实现全选相关推荐

最新文章

热门文章