【vue组件】element下拉框全选

效果

          <el-select
            v-model="entity.entityTypeIds"
            :placeholder="$t('0omr1DmkT5yr5CRm7fWBd')"
            filterable
            multiple
            collapse-tags
            ref="serviceSelect"
            @change="searchSelectEntityTypeIds"
            class="mix-select-style"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-option
              v-if="entityTypes.length > 0"
              :class="[
                { all: isIndeterminate === 'all' },
                { part: isIndeterminate === 'part' },
                { no: isIndeterminate === 'no' }
              ]"
              :label="$t('selectAll')"
              value="选项0"
            >
            </el-option>
            <el-option
              :title="item.text"
              v-for="item in entityTypes"
              :key="item.id"
              :label="item.text"
              :value="Number(item.id)"
            >
              {{ item.text }}
            </el-option>
          </el-select>

    searchSelectEntityTypeIds (val) {
      let allValues = []
      for (let item of this.entityTypes) {
        allValues.push(item.id)
      }
      allValues = ['选项0'].concat(allValues)
      const oldVal = this.oldSelectArray.concat([])
      const oldInclude0 = oldVal.includes('选项0')
      const newInclude0 = val.includes('选项0')
      // 若是全部选择
      if (newInclude0) {
        this.entity.entityTypeIds = allValues
        this.isIndeterminate = 'all'
      }
      if (oldInclude0 && !newInclude0) {
        this.entity.entityTypeIds = []
        this.isIndeterminate = 'no'
      }
      if (oldInclude0 && newInclude0) {
        this.entity.entityTypeIds = val
        this.entity.entityTypeIds = this.entity.entityTypeIds.filter(
          d => d !== '选项0'
        )
        this.isIndeterminate = 'part'
      }
      if (!oldInclude0 && !newInclude0) {
        if (val.length === allValues.length - 1) {
          this.entity.entityTypeIds = ['选项0'].concat(val)
          this.isIndeterminate = 'all'
        } else if (!val.length) {
          this.isIndeterminate = ''
        } else {
          this.isIndeterminate = 'part'
        }
      }
      this.oldSelectArray = this.entity.entityTypeIds
    },

<style lang="stylus">
.el-select-dropdown.is-multiple .all.selected:after {
  content: '\e6da';
}

.el-select-dropdown.is-multiple .part:after {
  position: absolute;
  content: '\e6d8';
  right: 20px;
  font-family: element-icons;
  font-size: 12px;
  font-weight: 700;
  color: #5374c0;
}

.el-select-dropdown.is-multiple .no.selected:after {
  content: "''";
}

.indexDrawer .el-drawer__wrapper{
  width: 66% !important;
  left: auto !important;
}
</style>