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

2.

3.

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

<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: "網(wǎng)易" },],checked: false,selectedArray: [],};}, methods: {selectAll() {/* Checkbox被選中 */if (this.checked) {this.selectedArray = [];/* 通過遍歷coList數(shù)組,將item.id全部添加進(jìn)selectArray這個(gè)數(shù)組 */this.coList.map((item) => {this.selectedArray.push(item.id);});/* 將選擇框select通過v-model進(jìn)行雙向綁定的formItem.select進(jìn)行以下賦值下列式子相當(dāng)于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;}},},

至此，大功告成。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。