el-mentUI 下拉框多选并且可支持checkBox，全选

先上组件的效果图：

 取值打印：

 组件 MultipleSelect/index.vue：

<template>
  <div>
    <!-- collapse-tags  超过2个省略+ 显示  -->
    <el-select
      v-model="selectValues"
      v-bind="$attrs"
      multiple
      placeholder="请选择"
      style="width: 100%"
      @change="changeSelect">
      <el-option v-if="options.length > 0 " label="全选" value="全选">
        <el-checkbox v-model="isSelectAll" @click.prevent.native>全选</el-checkbox>
      </el-option>
      <el-option
        v-for="item in options"
        :key="item[props.value]"
        :label="item[props.label]"
        :value="item[props.value]">
        <el-checkbox v-model="item.isCheck" @click.prevent.native>{
   
   { item[props.label] }}</el-checkbox>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "MultipleSelect",
  inheritAttrs: false, // 似乎设不设置都可以
  model: {
    // prop: "initSelectValues",
    event: "change",
  },
  props: {
    // initSelectValues: {
    //   type: Array,
    //   default: () => [],
    // },
    // 下拉选项
    options: {
      type: Array,
      default: () => [],
    },
    // 选项键值对
    props: {
      type: Object,
      default: () => {
        return {
          label: "label",
          value: "value",
        };
      },
    },
  },
  data() {
    return {
      selectValues: [],
      isSelectAll: false
    }
  },
  watch: {
    // 监听（全选，全不选以及checkbox是否勾选）
    selectValues: {
      handler(arr) {
        this.options.forEach((item) => {
          if (arr.includes(item[this.props.value])) {
            item.isCheck = true;
          } else {
            item.isCheck = false;
          }
        });

        if (arr.length === this.options.length) {
          this.isSelectAll = true;
        } else {
          this.isSelectAll = false;
        }
        // 强制更新（checkbox回显)
        this.$forceUpdate();
      }
    }
  },
  methods: {
    // 改变选中的值  
    changeSelect(val) {
      if (val.includes("全选")) {
        // 说明已经全选了，所以全不选
        if (val.length > this.options.length) {
          this.selectValues = [];
        } else {
          this.selectValues = this.options.map(
            (item) => item[this.props.value]
          );
        }
      }
      this.$emit("change", this.selectValues);
    }
  },
  created() {
    // 回显
    // this.selectValues = this.initSelectValues
  },
  mounted() {},
  destroyed() {
    this.$destroy()
    this.selectValues = []
  }
};
</script>

调用的时候 父组件：

<template>
  <div>
    <MultipleSelect v-model="value" :options="options"></MultipleSelect>
    <el-button @click="confirm">确定</el-button>
  </div>
</template>

<script>
import MultipleSelect from "@/components/MultipleSelect/index.vue";
export default {
  components: { MultipleSelect },
  data() {
    return {
      value: [],
      options: [
        {
          value: "1",
          label: "黄金糕",
        },
        {
          value: "2",
          label: "双皮奶",
        },
        {
          value: "3",
          label: "蚵仔煎",
        },
        {
          value: "4",
          label: "龙须面",
        },
        {
          value: "5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  methods: {
    confirm() {
      console.log("value:", this.value);
    },
  },
  created() {},
  mounted() {},
  destroyed() {
    this.$destroy();
  },
};
</script>

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140