原文鏈接

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>

總結

以上是生活随笔為你收集整理的el-select 结合 el-checkBox 实现下拉全选+多选功能；el-select下拉框全选功能；的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。