view-ui中select全选实现

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

2.

3.

二、关键问题
要实现这些最关键的就是要清楚，select选中是通过v-model的双向绑定实现的。要改变select的选中值，就是通过改变v-model绑定的值实现。
三、部分代码如下：

<FormItem label="公司">
  <Select
    v-model="formItem.select"
    @on-change="changeSelect"
    multiple
    filterable
  >
    <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;
      }
    },
  },

至此，大功告成。