view

最近，项目中有个需求：给select多选框增加一键全选的功能。 因为view-ui的select组件是不自带一键全选功能的，我决定自己封装一个。主要需求如下：
1.点击全选，选项全部勾选。
2.选项全部勾选情况下，点击全选，选项全部未勾选。
3.全选状态下，去掉任意一个选项，全选√消失。
一、三种情况分别如下：
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: "字节" },{ 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;}},},

至此，大功告成。