Element-UI+vue多选全选

点击全选，选中全部选项

全部选项选中后，自动跳转到全选

export function choiceHandler(val, that, all, active, len) {
    // console.log(all);
    if (val == '') {
        that[active] = ["全部"];
        that[all] = true;
        from = "";
        return
    }
    let from = ''
    if (that[all]) {
        that[all] = false;
        if (val.indexOf("全部") > -1) {
            that[active] = val.filter((item) => item != "全部");
            from = that[active][0];
        }
    } else {
        if (val.indexOf("全部") > -1) {
            // 点击了全部
            that[active] = ["全部"];
            that[all] = true;
            from = "";
        } else {
            // 点完所有选项后
            if (val.length == len) {
                that[active] = ["全部"];
                that[all] = true;
                from = "";
            } else {
                // 没有点击全部
                from = val.join(",");
            }
        }
    }
    return from
}

<template>
<el-select
   v-model="channelIdActive"
   multiple
   collapse-tags
   style="margin-right: 10px"
   placeholder="请选择"
   @change="channelChange"
   clearable
>
   <el-option key="全部" label="全部" value="全部" />
   <el-option
      v-for="item in channelListsData"
      :key="item.id"
      :label="item.ChannelName"
      :value="item.id"
   />
</el-select>
</template>



<script>
data(){
    return {
      // 渠道的选中内容
      userParams: {
          ChannelId: ''
      },
      // 渠道列表选中
      channelIdActive: ["全部"],
      // 渠道列表
      channelListsData: [],
      // 渠道内容全选状态
      allChannel: true,
    }
},
methods: {
    // 渠道选中值发生变化时
    channelChange(val) {
      let that = this;
      this.userParams.ChannelId = choiceHandler(
        val,
        that,
        "allChannel",
        "channelIdActive",
        this.channelListsData.length
      );
    },
}
</script>