目录
1. 基本知识2. 参数选择2.1 多选2.2 禁用2.3 搜索2.4 清空2.5 分组2.6 自定义内容2.7 自定义过滤
3. 实战Demo
1. 基本知识
el-select 是 Element UI 中的一个选择器组件，用于提供下拉框选择功能
常用形式一：
截图如下：
常用形式二：（结合数组进行遍历）
参数解释大致如下：
v-model="selectedOptions"：selectedOptions是Vue实例中定义的变量，用于存储所选选项的值v-for="option in options"：Vue的循环指令，用于遍历options数组中的每个选项。:key="option.value"：:标识v-for循环中的每个选项:label="option.label"：设置选项的显示文本:value="option.value"：设置选项的值
2. 参数选择
下面参数可自由组合
2.1 多选
2.2 禁用
2.3 搜索
2.4 清空
2.5 分组
2.6 自定义内容
选项2.2
2.7 自定义过滤
添加 filterable 属性使得可以自定义过滤方法
3. 实战Demo
一般会结合事件响应，其数据也不会放在此处，不然会过于冗余
配合事件响应时，可以使用@change事件来监听el-select的变化，并在发生变化时执行相应的操作
添加了@change事件监听器，指向了一个方法handleSelectChange
在Vue实例中，需要定义这个方法来处理el-select的变化：
new Vue({
el: '#app',
data: {
selectedOptions: [], // 用于存储选择的选项值的数组
options: [ // 下拉选项数组
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
// 可以继续添加更多选项
]
},
methods: {
handleSelectChange(value) {
console.log('选中的选项值:', value);
// 在这里可以对选中的选项值进行任何操作
}
}
});
在handleSelectChange方法中，value参数代表了当前选中的选项值，可以在这个方法中进行任何操作，比如更新数据、发送请求等等。