el-select實現全選功能

效果圖

依賴說明

使用element-ui的el-select和el-option進行二次封裝，故依賴element-ui

功能介紹

多選框支持選擇全部

• 新增【全部】選項，該選項文字可通過配置修改

組件代碼

<!--
  支持全選的多選框
-->

<template>
  <el-select v-model="selected"
             :collapse-tags="collapseTags"
             :multiple="multiple"
             :popper-append-to-body="false"
             class="all-select-box">
    <el-option v-if="multiple && data.length"
               id="select-all"
               ref="all"
               :class="{'selected': isSelectedAll,'divide-line': divideAll}"
               :label="allLabel"
               disabled
               value="@all"
               @click.stop.native="isSelectedAll = !isSelectedAll">
    </el-option>
    <el-option v-for="item in data"
               :key="item[label] + item[_value]"
               :label="item[label]"
               :value="item[_value]">
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'selectAll',
  model: {
    prop: 'value',
    event: 'v-model'
  },
  props: {
    // 全選框綁定值
    value: {
      type: Array,
      default: []
    },

    // 全選框數據
    data: {
      type: Array,
      default: []
    },

    // 全選按鈕標題
    allLabel: {
      type: String,
      default: '全部'
    },

    // 是否用線將全選與其它選項分割
    divideAll: {
      type: Boolean,
      default: false
    },

    // 全選框對應配置
    option: {
      type: Object,
      default: () => ({
        // 設置label對應字段
        label: 'label',
        // 設置value對應字段
        value: 'value'
      })
    },

    // el-select原生屬性
    multiple: {
      type: Boolean,
      default: true
    },
    collapseTags: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    // 當前的選中項列表
    selected: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('v-model', v)
      }
    },
    // 當前是否全選
    isSelectedAll: {
      get() {
        return this.data.every(i => this.selected.includes(i[this._value]))
      },
      set(v) {
        this.$emit('v-model', v ? this.data.map(i => i[this._value]) : [])
      }
    },
    label() {
      return this.option.label
    },
    _value() {
      return this.option.value
    },
  },
}
</script>

<style scoped>
#select-all {
  cursor: pointer;
}

.divide-line {
  border-bottom: 1px solid rgba(123, 123, 123, .1);
}

#select-all:not(.selected) {
  color: #606266;
}

/deep/ .el-select-dropdown__item.hover {
  background-color: transparent !important;
}

#select-all:hover, /deep/ .el-select-dropdown__item:hover {
  background-color: #f5f7fa !important;
}
</style>

樣例

<select-all v-model="selected"
            :data="listData"
            :option="{label: 'label', value: 'value'}">
</select-all>

參數說明

參數	說明	默認值
data	選擇框的數據列表，包括可選項的名稱及選擇的值等	[]
v-model/value	選中的值	[]
all-label	全選選項顯示的文字	'全部'
divide-all	是否用線將全選選項與其它選項分割	false
option	選擇框的配置 - label，設置顯示值對應的字段 - value，設置選中綁定值對應的字段
multiple	el-select屬性，是否多選	true
collapse-tags	el-select屬性，多選時是否折疊顯示選中項	true