[vue+element] 实现具备全选功能的多选下拉选框

<template>
  <el-select
    size="medium"
    multiple
    filterable
    :disabled="disabled"
    v-model="selectedArr"
    :loading="mulSelectLoading"
    :collapse-tags="collapseTags"
    placeholder="请选择"
    @remove-tag="removeTag"
  >
    <el-option
      label="全部"
      value="全部"
      @click.native="selectAll"
      v-if="selectOptions.length"
    ></el-option>
    <el-option
      v-for="item in selectOptions"
      :key="item.value"
      :label="item.key"
      :value="item.value"
      @click.native="changeSelect"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'MultipleSelect',
  data() {
    return {
      selectedArr: [],
    }
  },
  props: {
    // 选项
    selectOptions: {
      type: Array,
      default() {
        return []
      },
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 已选中选项
    mulSelecteds: {
      type: Array,
      default() {
        return []
      },
    },
    mulSelectLoading: {
      type: Boolean,
      default: false,
    },
    collapseTags: {
      type: Boolean,
      default: true,
    },
    compIndex: {
      type: [String, Number],
      default: null,
    },
  },
  methods: {
    selectAll() {
      const selectedArrLen = this.selectedArr.length
      const selectOptionsLen = this.selectOptions.length
      // 未全选(注意只有一个的条件判断)
      if (
        selectedArrLen < selectOptionsLen ||
        (selectedArrLen === 1 && selectedArrLen === selectOptionsLen)
      ) {
        this.selectedArr = this.selectOptions.map((el) => el.value)
        this.selectedArr.unshift('全部')
      } else {
        // 已全选时，点击则取消全部
        this.selectedArr = []
      }
      this.emitChangeSelect()
    },
    changeSelect() {
      if (this.selectedArr.includes('全部')) this.selectedArr.shift('全部')
      if (this.selectedArr.length == this.selectOptions.length)
        this.selectedArr.unshift('全部')
      this.emitChangeSelect()
    },
    removeTag(val) {
      if (val === '全部') {
        this.selectedArr = []
      }
      this.emitChangeSelect()
    },
    emitChangeSelect() {
      const selectedList = _.cloneDeep(this.selectedArr)
      if (selectedList.includes('全部')) selectedList.shift('全部')
      this.$emit('changeSelect', selectedList, this.compIndex)
    },
  },
  watch: {
    mulSelecteds: {
      handler(newVal, oldVal) {
        this.selectedArr = newVal
        if (
          !this.selectedArr.includes('全部') &&
          this.selectedArr.length &&
          this.selectedArr.length === this.selectOptions.length
        ) {
          this.selectedArr.unshift('全部')
        }
        if (this.selectedArr.includes('全部')) this.selectAll()
      },
      immediate: true,
    },
  },
}
</script>