el-select 结合 el-checkBox 实现下拉全选+多选功能；el-select下拉框全选功能；

最新推荐文章于 2023-12-25 14:35:36 发布

i_am_a_div_日积月累_

最新推荐文章于 2023-12-25 14:35:36 发布

阅读量1.3k

点赞数 1

分类专栏： vue element-ui 文章标签： el-select下拉框全选 el-select下拉框多选 el-select选择框多选

本文链接：https://blog.csdn.net/i_am_a_div/article/details/123899866

版权

vue 同时被 2 个专栏收录

104 篇文章 5 订阅

订阅专栏

element-ui

56 篇文章 5 订阅

订阅专栏

原文链接

el-select选择框也有多选功能，但是没有全选。故需要改造一下，el-select 结合 el-checkBox 实现下拉全选+多选功能。

在这里插入图片描述

代码如下，可直接复制使用：

<!--
 * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能
-->
<template>
  <div style="padding: 300px 100px;">
    <el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="请选择菜单" clearable>
      <el-checkbox v-model="checkedAll" @change="selectAll">全选</el-checkbox>
      <el-option v-for="item in menuList" :key="item.id" :label="item.menuName" :value="item.id"></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data () {
    return {
      checkedAll: false,
      menus: [],
      menuList: [
        { id: '01', menuName: '菜单一' },
        { id: '02', menuName: '菜单二' },
        { id: '03', menuName: '菜单三' },
        { id: '04', menuName: '菜单四' },
        { id: '05', menuName: '菜单五' },
        { id: '06', menuName: '菜单六' },
      ]
    }
  },
  mounted () {

  },
  methods: {
    // 点击下拉列表选项时触发
    changeSelectMenu (val) {
      if (val.length === this.menuList.length) {
        this.checkedAll = true
      } else {
        this.checkedAll = false
      }
    },
    // 点击“全选”按钮时触发
    selectAll () {
      this.menus = []
      if (this.checkedAll) {
        this.menuList.map(item => {
          this.menus.push(item.id)
        })
      } else {
        this.menus = []
      }
    }
  }
}
</script>
<style lang='less'>
.el-select-dropdown {
  .el-checkbox {
    display: inline-block;
    margin-left: 20px;
    padding: 8px 0;
  }
}
</style>