原文链接

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>