封装有全选的el-select

相关配置在代码中有注释

组件：SeletAll.vue

<template>
  <el-select :disabled="disabled" style="width: 100%" v-model="form[config.selectArr]" filterable clearable multiple :placeholder="placeholder">
    <el-checkbox
      v-model="check"
      style="margin-left: 10px"
      :indeterminate="form[config.selectArr] && (form[config.selectArr].length !== options.length)"
      @change="selectAll"
    >
      全选
    </el-checkbox>
    <el-option
      v-for="item in options"
      :key="item[`${config.value}`]"
      :value="item[`${config.value}`]"
      :label="item[`${config.label}`]">
    </el-option>
  </el-select>
</template>

<script>

export default {
  name: 'SelectAll',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 下拉选项
    options: {
      type: Array,
      default: () => []
    },
    // 配置
    config: {
      type: Object,
      default: () => {
        return {
          // 显示label
          label: 'label',
          //存值
          value: 'value',
          // 存在form中的某一项
          selectArr: 'value'
        }
      }
    },
    // 表单（通过数据引用方式改变数据）
    form: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    check: {
      get() {
        if (this.form[this.config.selectArr] && (this.form[this.config.selectArr].length === this.options.length)) {
          return true
        }
        return false
      },
      set() {
      }
    }
  },
  methods: {
    // 是否全选
    selectAll(checked) {
      if (checked) {
        this.form[this.config.selectArr] = this.options.map(item => item[`${this.config.value}`])
      } else {
        this.form[this.config.selectArr] = []
      }
    },
  }
}
</script>

使用：

<template>
  <div>
    <select-all :form.sync="form" :options="options" :config="config"></select-all>
  </div>
</template>

<script>

import SelectAll from "../components/SelectAll"; // 导入组件

export default {
  name: 'index',
  components: {SelectAll},
  data() {
    return {
      form: {
        array: ['选项1']
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }],
      config: {
        label: 'label',
        value: 'value',
        selectArr: 'array'  // form.array 取array
      }
    }
  },
  methods: {}
}
</script>