<template> <el-select v-model="value" :empty-values="[null, undefined]" :value-on-clear="null" clearable placeholder="Select" style="width: 240px" @clear="handleClear" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </template> <script setup> import { ref } from 'vue' import { ElMessage } from 'element-plus' const value = ref('') const options = [ { value: '', label: 'All', }, { value: 'Option1', label: 'Option1', }, { value: 'Option2', label: 'Option2', }, { value: 'Option3', label: 'Option3', }, { value: 'Option4', label: 'Option4', }, { value: 'Option5', label: 'Option5', }, ] const handleClear = () => { ElMessage.info(`The clear value is: ${value.value}`) } </script>
<template> <div> <p>default</p> <el-select v-model="value1" multiple placeholder="Select" style="width: 240px" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </div> <div> <p>use collapse-tags</p> <el-select v-model="value2" multiple collapse-tags placeholder="Select" style="width: 240px" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </div> <div> <p>use collapse-tags-tooltip</p> <el-select v-model="value3" multiple collapse-tags collapse-tags-tooltip placeholder="Select" style="width: 240px" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </div> <div> <p>use max-collapse-tags</p> <el-select v-model="value4" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="Select" style="width: 240px" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </div> </template> <script setup> import { ref } from 'vue' const value1 = ref([]) const value2 = ref([]) const value3 = ref([]) const value4 = ref([]) const options = [ { value: 'Option1', label: 'Option1', }, { value: 'Option2', label: 'Option2', }, { value: 'Option3', label: 'Option3', }, { value: 'Option4', label: 'Option4', }, { value: 'Option5', label: 'Option5', }, ] </script>
站长微信:xiaomao0055
站长QQ:14496453