VUE中,el-select选择器多选下拉框实现全选功能和取消全选

VUE中,el-select选择器多选下拉框实现全选功能和取消全选

Select 选择器之elementUI版——https://element.eleme.cn/#/zh-CN/component/select

Select 选择器之Ant Design of Vue版——https://www.antdv.com/components/select-cn/

场景

elementUI的下拉框支持多选，但是不支持全选，但需求就要这个功能

解决思路

方法一：下拉项增加一个【全选】

应该有以下几种情况：

• 下拉选项全都勾选时，【全选】自动勾选；
• 下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；
• 下拉选项全都未勾选时，点击【全选】后，所有下拉选项全部勾选；
• 下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；

实例1

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; } 

效果图

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10875.html