ElementUI - select 全选组件

基于vue2 +element-ui

<template>
  <el-select
    v-model="internalSelectedValues"
    v-bind="$attrs"
    multiple
    @remove-tag="handleRemoveTag"
    @change="handleChange"
  >
    <el-option
      v-if="showSelectAll"
      :value="selectAllValue"
      :label="selectAllLabel"
      class="select-all-option"
    >
      <el-checkbox
        :value="isFullySelected"
        :indeterminate="isIndeterminate"
        @change="handleSelectAllChange"
        @click.native.stop
      >
        {{ selectAllLabel }}
      </el-checkbox>
    </el-option>
    <el-option
      v-for="item in options"
      :key="item[getValue()]"
      :label="item[getLabel()]"
      :value="item[getValue()]"
    >
      <el-checkbox
        :value="isItemSelected(item[getValue()])"
        @change="(val) => toggleItemSelection(item[getValue()], val)"
        @click.native.stop
      >
        {{ item[getLabel()] }}
      </el-checkbox>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'TeCascadeSelect',

  props: {
    options: {
      type: Array,
      required: true,
      default: () => []
    },
    showSelectAll: {
      type: Boolean,
      default: true
    },
    selectAllLabel: {
      type: String,
      default: '全选'
    },
    selectAllValue: {
      type: String,
      default: 'SELECT_ALL'
    },
    value: {
      type: Array,
      default: () => []
    },
    showAllTag: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      internalSelectedValues: [...this.value],
      debounceTimer: null
    }
  },

  computed: {
    allOptions() {
      return this.options.map((item) => item[this.getValue()])
    },
    isFullySelected() {
      if (this.allOptions.length === 0) return false
      // 修复：只检查实际选项，忽略全选标记
      const selectedCount = this.internalSelectedValues.filter(
        (v) => v !== this.selectAllValue && this.allOptions.includes(v)
      ).length
      return selectedCount === this.allOptions.length
    },

    isIndeterminate() {
      if (this.allOptions.length === 0) return false
      // 修复：只检查实际选项，忽略全选标记
      const selectedCount = this.internalSelectedValues.filter(
        (v) => v !== this.selectAllValue && this.allOptions.includes(v)
      ).length
      return selectedCount > 0 && selectedCount < this.allOptions.length
    }
  },

  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        // 修复：深度比较并同步值
        if (
          JSON.stringify(newVal) !==
          JSON.stringify(
            this.internalSelectedValues.filter((v) => v !== this.selectAllValue)
          )
        ) {
          this.internalSelectedValues = [...newVal]
          // 如果全选了，添加全选标记
          if (
            newVal.length === this.allOptions.length &&
            this.allOptions.length > 0
          ) {
            this.echoAllTag(this.internalSelectedValues)
          }
        }
      }
    }
  },

  methods: {
    getValue() {
      return this.$attrs.valueKey ? this.$attrs.valueKey : 'value'
    },

    getLabel() {
      return this.$attrs.labelKey ? this.$attrs.labelKey : 'label'
    },
    isItemSelected(value) {
      return this.internalSelectedValues.includes(value)
    },

    toggleItemSelection(value, selected) {
      this.$nextTick(() => {
        let newValues = [...this.internalSelectedValues]

        if (selected) {
          if (!newValues.includes(value)) {
            newValues.push(value)
          }
        } else {
          newValues = newValues.filter((v) => v !== value)
        }

        // 处理全选标记
        const allSelected = this.allOptions.every((opt) =>
          newValues.includes(opt)
        )
        if (allSelected && !newValues.includes(this.selectAllValue)) {
          this.echoAllTag(newValues)
        } else if (!allSelected && newValues.includes(this.selectAllValue)) {
          newValues = newValues.filter((v) => v !== this.selectAllValue)
        }

        this.internalSelectedValues = [...new Set(newValues)]
        this.emitChange()
      })
    },
    // 是否回显全选标记
    echoAllTag(list) {
      if (!this.showAllTag) return
      list.push(this.selectAllValue)
    },
    handleSelectAllChange(selected) {
      this.$nextTick(() => {
        let newValues = [...this.internalSelectedValues]

        if (selected) {
          // 添加所有选项
          this.allOptions.forEach((opt) => {
            if (!newValues.includes(opt)) {
              newValues.push(opt)
            }
          })
          // 添加全选标记
          if (!newValues.includes(this.selectAllValue)) {
            this.echoAllTag(newValues)
          }
        } else {
          // 移除所有选项
          newValues = newValues.filter((v) => !this.allOptions.includes(v))
          // 确保移除全选标记
          newValues = newValues.filter((v) => v !== this.selectAllValue)
        }

        this.internalSelectedValues = [...new Set(newValues)]
        this.emitChange()
      })
    },

    handleRemoveTag(tag) {
      if (tag === this.selectAllValue) {
        this.internalSelectedValues = []
      } else {
        this.internalSelectedValues = this.internalSelectedValues.filter(
          (v) => v !== tag
        )
        // 如果移除了全选标记对应的最后一个选项
        if (
          this.isFullySelected &&
          this.internalSelectedValues.includes(this.selectAllValue)
        ) {
          this.internalSelectedValues = this.internalSelectedValues.filter(
            (v) => v !== this.selectAllValue
          )
        }
      }
      this.emitChange()
    },

    handleChange() {
      this.emitChange()
    },

    emitChange() {
      const valuesToEmit = this.internalSelectedValues.filter(
        (v) => v !== this.selectAllValue
      )
      this.$emit('input', valuesToEmit)
      this.$emit('change', valuesToEmit)
    }
  }
}
</script>

<style lang="scss" scoped>
.select-all-option {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 5px;
  padding-right: 0 !important;
  margin-bottom: 5px;
  .el-checkbox {
    width: 100%;
  }
}

.el-checkbox {
  margin-right: 8px;
}
</style>