使用vue3.2 element-plus 封装的 可一键清除一键全选多选组件 el-select

效果如下：

废话不多说，没什么需要注意的 复制源码直接使用 好用极了

<template>
    <div class="m-4">
        <el-select ref="myselect" @change="valueChange" v-model="selectValue" multiple placeholder="请选择"
            style="width: 240px">
            <el-option value="all" label="全选" @click="chooseAll"></el-option>
            <el-option value="clear" label="清除" @click="deleteAll"></el-option>
            <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, computed } from 'vue'
const myselect = ref()
// 不加 any 报错的原因暂时不知道 
const selectValue = ref<any>([])
const chooseAll = () => {
    let arr: any = []
    options.forEach(item => {
        arr.push(item.value)
    })
    selectValue.value = arr
    myselect.value.blur()
}
const deleteAll = () => {
    selectValue.value = []
    myselect.value.blur()
}
const filterOptions = computed(() => {
    return options.filter(item => {
        return !selectValue.value.includes(item.value)
    })
})
// 每次变化的回调
const valueChange = () => {
    console.log(selectValue.value);
}
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
</script>