vue3+element下拉多选框组件

之前整的又乱又复杂被人发现了，重新改改 不过使用方法没变

<!-- 下拉多选 -->
<template>
  <div class="select-checked">
    <el-select v-model="selectedOptions.data" :style="selectWidth" :class="{ 'hidden': selectedOptions.data.length < 2 }"
      multiple placeholder="请选择" :popper-append-to-body="false" collapse-tags popper-class="check-multi"
      @change="emit('selected', selectedOptions.data)">
      <template v-if="selectedOptions.data.length > 1" #prefix>
        <div class="multi">(多选) x {{ selectedOptions.data.length }}</div>
      </template>
      <el-option class="multiple" v-for="item in options" :value="item.value" :label="item.label" :key="item.value">
        <input type="checkbox" :value="item.value" v-model="selectedOptions.data" class="my-checkbox item-input">
        {{ item.label }}
      </el-option>
      <div class="is-all">
        <div @click="handleOptionsAllChange(true)">全选</div>
        <div @click="handleOptionsAllChange(false)">反选</div>
        <slot></slot>
      </div>
    </el-select>
  </div>
</template>


<script setup>
import { reactive, defineProps } from 'vue'

let props = defineProps({
  options: {
    type: Array,
    required: true
  },
  width: {
    type: Number,
    default() {
      return 420
    }
  }
})

let selectedOptions = reactive({ data: [] })

let selectWidth = 'width:' + props.width + 'px'

const emit = defineEmits(['selected']);

const handleOptionsAllChange = (isAll) => {
  if (isAll) {
    selectedOptions.data = []
    props.options.forEach(item => {
      selectedOptions.data.push(item.value)
    })
    console.log(selectedOptions.data);
  } else {
    let arr = []
    props.options.forEach((item) => {
      if (!selectedOptions.data.includes(item.value)) {
        arr.push(item.value)
      }
    })
    selectedOptions.data = arr
  }
  emit('selected', selectedOptions.data);
}

</script>

<style lang="scss">
.select-checked {
  .el-select__tags-text {
    min-width: 70px;
  }

  // tag删除图标
  .el-tag__close,
  .el-icon-close {
    display: none;
  }

  // 标签tag背景
  .el-tag.el-tag--info {
    background: transparent;
    border: 0;
    display: none;
  }

  // 第一个显示名称

  .hidden {
    .el-tag.is-closable.el-tag--default {
      display: block;
      line-height: 30px;
      padding-left: 15px;
      margin-left: -4px;
      font-weight: 400;
      color: #333333;
    }
  }

}

.create-new {
  font-size: 12px;
  font-weight: 400;
  color: #3686FF;
  padding-right: 10px;
  // text-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

.is-all {
  display: flex;
  padding-left: 10px;

  div {
    cursor: pointer;
    margin: 6px 10px;
    transition: 0.2s;

    &:hover {
      opacity: .7;
    }
  }
}

.multi {
  font-size: 12px;
  font-weight: 400;
  color: #333333;
}

</style>
<style lang="scss" scoped>
.check-multi {
  .el-select-dropdown__item.selected::after {
    display: none;
  }

  .el-select-dropdown__item {
    display: flex;
    align-items: center;

    .item-input {
      margin-right: 5px;
    }
  }

  .el-select-dropdown__list {
    .selected {
    
    background: rgba($color: #3686FF, $alpha: 0.1);
      }
  }
  
}
</style>

使用:

<selectMulti :options="options" @selected="selected"></selectMulti>


let options = [
  {
    value: '001',
    label: '黄金糕',
    check: false
  },
  {
    value: '002',
    label: '双皮奶',
    check: false
  },
  {
    value: '003',
    label: '蚵仔煎',
    check: false
  },
  {
    value: '004',
    label: '龙须面',
    check: false
  },
  {
    value: '005',
    label: '北京烤鸭',
    check: false
  }
]


const selected = (value) => {
  console.log(value);
}