---

前言

實現效果預覽

---

提示：本內容基于element-ui 組件實現，如果使用其他組件庫、可參考下面實現方式的思路

一、實現思路

準備直接使用 el-select 組件的 multiple 屬性實現 多選，添加el-checkbox 組件實現全選，以及數據項的選框展示

二、實現代碼

1.模板代碼

在el-select 中加入了全選 el-checkbox，以及在 el-option 中加入了 el-checkbox 控制樣式。

<el-select v-model="data" multiple popper-class="select-popover-class"><el-checkbox :value="selectAll" :indeterminate="indeterminate" @change="selectAllHandle">全選</el-checkbox><el-option v-for="item in options" :key="item.value" :value="item.value":label="item.label"><el-checkbox :value="data.includes(item.value)" :label="item.label"></el-option>
</el-select>

2. css 樣式

重點在第二個樣式，我們這里只取 el-checkbox 的樣式，所以取消事件的觸發。

/* 控制全選按鈕樣式 */
.select-popover-class .el-scrollbar__view > .el-checkbox{padding: 5px 20px;
}/* 取消多選框觸發事件 */
.select-popover-class .el-scrollbar__view > li .el-checkbox {pointer-events: none;
}/* 隱藏多選框選中勾選樣式 √ */
.select-popover-class .el-scrollbar__view > li::after {display: none;
}

3.js 代碼

從頭到尾只有 data 屬性是雙向綁定的，其他 包括selectAll、indeterminate、以及選項上的el-checkbox是否選中 都是根據data 屬性判斷計算的。

使用的是vue2.x、JavaScript 實現，使用vue3.x、TypeScript，參考實現就好。

{data: {data: [],options: [{label: '選項1',value: 1},{label: '選項2',value: 2},{label: '選項3',value: 3}]},computed: {selectAll() {if(this.data.length){return this.data.length === this.options.length;}return false;},indeterminate() {if(this.data.length){return this.data.length !== this.options.length;}return false;}},methods: {selectAllHandle(bool) {this.data = bool ? this.options.map(v => v.value) : [];}},
}

DEMO 演示

demo中引用了 vue、element-ui 的cdn 資源，可能加載較慢，如果加載不成功自行更換其他可用資源嘗試。

多選演示demo

---

總結

因為整個交互都是使用的el-select 多選模式自帶的功能，所以結構還是比較清晰的。

注意： 多選框都是使用 :value="" 綁定數據、無須雙向綁定。

以上信息如有問題或疏漏，歡迎指正，謝謝。