最近，項目中有個需求：給select多選框增加一鍵全選的功能。 因為view-ui的select組件是不自帶一鍵全選功能的，我決定自己封裝一個。主要需求如下：
1.點擊全選，選項全部勾選。
2.選項全部勾選情況下，點擊全選，選項全部未勾選。
3.全選狀態(tài)下，去掉任意一個選項，全選√消失。
一、三種情況分別如下：
1.

2.

3.

二、關鍵問題
要實現這些最關鍵的就是要清楚，select選中是通過v-model的雙向綁定實現的。要改變select的選中值，就是通過改變v-model綁定的值實現。
三、部分代碼如下：

<FormItem label="公司"><Selectv-model="formItem.select"@on-change="changeSelect"multiplefilterable><Checkbox v-model="checked" @on-change="selectAll">全選</Checkbox><Option v-for="item in coList" :key="item.id" :value="item.id">{{item.name}}</Option></Select> </FormItem> data() {return {coList: [{ id: 1, name: "百度" },{ id: 2, name: "騰訊" },{ id: 3, name: "阿里" },{ id: 4, name: "字節(jié)" },{ id: 5, name: "平安" },{ id: 6, name: "網易" },],checked: false,selectedArray: [],};}, methods: {selectAll() {/* Checkbox被選中 */if (this.checked) {this.selectedArray = [];/* 通過遍歷coList數組,將item.id全部添加進selectArray這個數組 */this.coList.map((item) => {this.selectedArray.push(item.id);});/* 將選擇框select通過v-model進行雙向綁定的formItem.select進行以下賦值下列式子相當于this.formItem.select = [1,2,3,4,5,6] */this.formItem.select = this.selectedArray;} /* Checkbox未被選中 */ else {this.formItem.select = "";}},changeSelect(e) {if (e.length === this.coList.length) {this.checked = true;} else {this.checked = false;}},},

至此，大功告成。

總結

以上是生活随笔為你收集整理的view-ui中select全选实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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