原文链接
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>
