el-select 下拉框全选、多选的几种方式组件示例详解

更新时间：2023年12月22日 10:01:43 作者：奋斗吧程序媛

这篇文章主要介绍了el-select 下拉框全选、多选的几种方式组件示例详解,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

组件一、基础多选

适用性较广的基础多选，用 Tag 展示已选项

<template>
  <el-select v-model="value1" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: []
      }
    }
  }
</script>

为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

<template>
  <el-select
    v-model="value2"
    multiple
    collapse-tags
    style="margin-left: 20px;"
    placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value2: []
      }
    }
  }
</script>

组件二、el-select 下拉框多选实现全选

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

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

上代码：

<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>
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 = []
      }
    }
  }
}

效果图二、

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

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

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

效果图三、

下拉框和全选都加上 checkbox，选择框 el-select 全选多选， el-option与el-checkbox的组合使用

需要注意的事项：

1. el-select与el-checkbox-group的v-model 绑定的值，需相同，绑定同一个变量
2. el-option的value与el-checkbox的label绑定的值也需要相同
3. el-checkbox 需要使用 style=“pointer-events: none”，是为了去掉鼠标事件，阻止事件冒泡，触发了两次el-select的change事件

代码如下:

 <el-select
                v-model="lineNumStage"
                v-bind="$attrs"
                multiple
                style="width: 100%;"
                placeholder="请选择线路"
                @change="handleSelect"
              >
                <div style="padding: 0 20px; line-height:34px">
                  <el-checkbox v-model="isCheckAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                </div>
                <el-checkbox-group v-model="lineNumStage">
                  <el-option v-for="item in checkedLineArry" :key="item.value" :label="item.name" :value="item.value">
                    <el-checkbox style="pointer-events: none" :label="item.value">
                      {{ item.label }}
                    </el-checkbox>
                  </el-option>
                </el-checkbox-group>
              </el-select>

checkAll: false, // 是否全选
isIndeterminate: false, //全选复选框标识        
options: [
    { name: '京广高速', value: '京广高速' },
    { name: '京包客专', value: '京包客专' },
    { name: '京哈高速', value: '京哈高速' },
    { name: '崇礼线',   value: '崇礼线' },
    { name: '京秦高铁', value: '京秦高铁' },
    { name: '京沪高铁', value: '京沪高铁' },
    { name: '京津城际', value: '京津城际' },
],
biddingStage: [],
// 下拉框选择事件
handleSelect(value) {
    const checkedCount = value.length;
    this.checkAll = checkedCount === this.options.length;
    this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
},
// 全选事件
handleCheckAllChange(val) {
    const data = this.options.map(item => {
        return item.value
    })
    this.biddingStage = val ? data : [];
    this.isIndeterminate = false;
},

注: 如果需要把右边的√去掉，el-select加上class和popper-append-to-body=false属性，然后css修改

 /deep/ .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
   	display: none;
}

效果图四、全选全部选中的时候，下拉框的文字是全选，后面是 + 12 数量

思路：
由于添加了：collapse-tags 属性后，全选选中的时候，正常会默认选中第一个label的值显示，后面是 + 全部数量 -1 . 我们可以在初始化的时候，把默认选中的数组里面最前面添加一项“全选”

// 初始化给下拉框选中 的数组赋值
this.biddingStage = [ '京广高速','京包客专', '京哈高速','崇礼线','京沪高铁','京津城际']
this.biddingStage.unshift('全选')

然后在全选的方法里面：判断如果是全选就在最前面添加1项 value 值 ‘全选’

// 全选事件
handleCheckAllChange(val) {
    const data = this.options.map(item => {
        return item.value
    })
    // this.biddingStage = val ? data : [];
     if (val) {
        this.biddingStage = data
        this.biddingStage .unshift('全选')
      } else {
        this.biddingStage  = []
      }
    this.isIndeterminate = false;
},

然后在下拉框选项改变的时候:

1. 先用arr1的变量存一下，把下拉框的数组过滤出不含全选的，剩余全部数据

2. 用selectArr的变量存一下， value的数组过滤出不含全选的，剩余全部数据

然后用新的2个变量去执行

      const checkedCount = selectArr.length
      this.isCheckAll = checkedCount === arr1.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < arr1.length

最后在判断 this.isCheckAll 是否是 true 是的话，就是全选。在数组最前面添加 1项 value ’全选‘
否则就移除 ’全选‘

      if (this.isCheckAll) {
        console.log('quanxuan')
        this.biddingStage.unshift('全选')
      } else {
        this.biddingStage = this.biddingStage.filter((item) => {
          return item !== '全选'
        })
        console.log(this.biddingStage)
      }

这部分全部代码如下:

    // 线路下拉框选择事件
    handleSelect(value) {
      console.log('value:', value)
      const arr1 = this.options.filter((item) => {
        return item !== '全选'
      })
      const selectArr = value.filter((item) => {
        return item !== '全选'
      })
      const checkedCount = selectArr.length
      this.isCheckAll = checkedCount === arr1.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < arr1.length
      if (this.isCheckAll) {
        console.log('quanxuan')
        this.biddingStage.unshift('全选')
      } else {
        this.biddingStage= this.biddingStage.filter((item) => {
          return item !== '全选'
        })
        console.log(this.biddingStage)
      }
    },

到此这篇关于el-select 下拉框全选、多选的几种方式组件的文章就介绍到这了,更多相关el-select 下拉框全选、多选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue项目全局配置页面缓存之按需读取缓存的实现详解
这篇文章主要给大家介绍了关于Vue项目全局配置页面缓存之实现按需读取缓存的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧
2018-08-08
vue 跳转页面$router.resolve和$router.push案例详解
这篇文章主要介绍了vue 跳转页面$router.resolve和$router.push案例详解,这样实现了既跳转了新页面,又不会让后端检测到页面链接不安全之类的,需要的朋友可以参考下
2023-10-10
基于vue--key值的特殊用处详解
这篇文章主要介绍了基于vue--key值的特殊用处详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vite打包性能优化之开启Gzip压缩实践过程
vue前端项目发布的时候,打包可实现gzip格式的压缩,下面这篇文章主要给大家介绍了关于Vite打包性能优化之开启Gzip压缩的相关资料,需要的朋友可以参考下
2022-12-12
Vue表单数据修改与删除功能实现
本文通过实例代码介绍了Vue表单数据修改与删除功能实现,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友跟随小编一起看看吧
2023-10-10
vue+element tabs选项卡分页效果
这篇文章主要为大家详细介绍了vue+element tabs选项卡分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
daisyUI解决TailwindCSS堆砌class问题详解
这篇文章主要为大家介绍了daisyUI解决TailwindCSS堆砌class问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
element-plus中如何实现按需导入与全局导入
本文主要介绍了element-plus中如何实现按需导入与全局导入，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
webpack&webpack-cli完全卸载过程
本文介绍了如何删除全局和本地的webpack及其CLI,并提供了检查webpack残余文件的方法,总结了个人的操作经验,旨在为读者提供参考,并期待获得更多支持
2024-09-09
Vue项目数据动态过滤实践及实现思路
这篇文章主要介绍了Vue项目数据动态过滤实践,，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09