最近搜索
vue3 ui Select 选择器
管理员
2025-01-16 18:30
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <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
按分类分组
按日期分组