之前整的又乱又复杂被人发现了,重新改改 不过使用方法没变
<!-- 下拉多选 -->
<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);
}