在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中,el-select 选择器组件是一个常用的表单控件,用于从一组选项中选择一个或多个值。以下是对这两个版本下 el-select 组件的属性、事件和方法的详细介绍,并附带示例。
Vue 2 的 Element UI
el-select
属性:
v-model/value:绑定值,即选中的值multiple:是否多选disabled:是否禁用placeholder:占位符clearable:是否可以清空选项filterable:是否可搜索allow-create:是否允许用户创建新条目,需配合filterable使用remote:是否使用远程搜索remote-method:远程搜索方法loading:是否正在加载远程数据loading-text:加载远程数据时的文本提示reserve-keyword:多选且可搜索时,是否保留关键字collapse-tags:多选时是否将选中值按文字的形式展示multiple-limit:多选时用户最多可以选择的项目个数size:选择器尺寸popper-class:下拉列表的类名default-first-option:在选中项发生变化时,是否将第一个选项作为默认值...(其他原生select属性)
事件:
change:选中值发生变化时触发visible-change:下拉列表的显示状态发生变化时触发remove-tag:多选模式下移除 tag 时触发clear:在可清空模式下点击清空按钮时触发blur:失去焦点时触发focus:获得焦点时触发...(其他原生select事件)
方法(Element UI 的 el-select 没有直接提供方法,但可以通过属性和事件来控制其行为)
示例:
<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>
export default {data() {return {value: '',options: [{value: 'Option1',label: '黄金糕'}, {value: 'Option2',label: '双皮奶'}, /* ...其他选项... */ ]};},watch: {value(newVal, oldVal) {console.log('值已改变:', newVal);}}
};
</script>
Vue 3 的 Element Plus
在 Element Plus 中,el-select 的使用与 Vue 2 中的 Element UI 非常相似,但可能有一些新增或调整的属性、事件和方法。你应该查阅 Element Plus 的官方文档以获取最新的信息。
属性、事件 和 方法 的大部分与 Vue 2 中的 Element UI 相同,但可能会有一些变化或增加。
示例(在 Vue 3 中使用 Composition API):
<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>
import { ref } from 'vue';export default {setup() {const value = ref('');const options = ref([{ value: 'Option1', label: '黄金糕' },{ value: 'Option2', label: '双皮奶' },/* ...其他选项... */]);const handleChange = (newVal) => {console.log('值已改变:', newVal);};return {value,options,handleChange};},watch: {value(newVal, oldVal) {// 这里可以使用 Composition API 的 watch 替代 Vue 2 的 data watcherconsole.log('值已改变:', newVal