首页elementui Select 选择器

elementui Select 选择器

时间: 2025-01-31 15:54:47 浏览: 46

### ElementUI Select 选择器使用方法 #### 基本结构 `<el-select>` 是用于创建下拉列表的选择组件，允许用户从预定义选项中选择一项或多项。基本结构如下所示： ```html <template> <div> <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> <script> export default { data() { return { selectedValue: '', options: [{ value: 'option1', label: '黄金糕' }, { value: 'option2', label: '双皮奶' }] } } } </script> ``` 此代码展示了如何绑定 `v-model` 到选定值以及通过循环渲染多个 `<el-option>` 元素来填充可选项[^2]。 #### 多选模式当设置属性 `multiple=true` 后，可以选择多个项，并且可以通过监听事件处理函数如 `@remove-tag` 来响应标签被删除的情况；同时也可以利用 `@change` 监听整个选择状态的变化: ```html <el-select v-model="selectedValues" multiple @change="handleChange" @remove-tag="handleRemoveTag">  </el-select> ``` 其中 `handleChange()` 和 `handleRemoveTag(tag)` 方法可以在 Vue 组件的方法部分实现逻辑操作。 #### 自定义样式调整对于希望自定义样式的开发者来说，可能遇到一些挑战因为默认情况下某些内部元素难以直接覆盖其 CSS 类名。解决办法之一是在全局范围内添加特定的选择器优先级更高的规则或者采用 scoped 样式表并结合深度作用符 `/deep/` 或者 `::v-deep` 对目标节点应用新的样式[^1]。

阅读全文