当前位置： 首页 > news >正文

ElementUI浅尝辄止37：Select 选择器

news 2025/8/16 1:41:54

当选项过多时，使用下拉菜单展示并选择内容。

1.如何使用？基础单选

v-model的值为当前被选中的el-option的 value 属性值

<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 {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: ''}}}
</script>

2.禁用选项

在el-option中，设定disabled值为 true，即可禁用该选项

<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value":disabled="item.disabled"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶',disabled: true}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: ''}}}
</script>

3.禁用状态

选择器不可用状态

为el-select设置disabled属性，则整个选择器不可用

<template><el-select v-model="value" disabled 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 {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, ],value: ''}}}
</script>

4.可清空单选

包含清空按钮，可将选择器清空为初始状态

为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

<template><el-select v-model="value" clearable 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 {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: ''}}}
</script>

5.基础多选

适用性较广的基础多选，用 Tag 展示已选项

为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

<template><el-select v-model="value1" multiple placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-selectv-model="value2"multiplecollapse-tagsstyle="margin-left: 20px;"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 {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value1: [],value2: []}}}
</script>

6.自定义模板

可以自定义备选项

将自定义的 HTML 模板插入el-option的 slot 中即可。

<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in cities":key="item.value":label="item.label":value="item.value"><span style="float: left">{{ item.label }}</span><span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span></el-option></el-select>
</template><script>export default {data() {return {cities: [{value: 'Beijing',label: '北京'}, {value: 'Shanghai',label: '上海'}, {value: 'Nanjing',label: '南京'}, {value: 'Chengdu',label: '成都'}, {value: 'Shenzhen',label: '深圳'}, {value: 'Guangzhou',label: '广州'}],value: ''}}}
</script>

7.分组

备选项进行分组展示

使用el-option-group对备选项进行分组，它的label属性为分组名

<template><el-select v-model="value" placeholder="请选择"><el-option-groupv-for="group in options":key="group.label":label="group.label"><el-optionv-for="item in group.options":key="item.value":label="item.label":value="item.value"></el-option></el-option-group></el-select>
</template><script>export default {data() {return {options: [{label: '热门城市',options: [{value: 'Shanghai',label: '上海'}, {value: 'Beijing',label: '北京'}]}, {label: '城市名',options: [{value: 'Chengdu',label: '成都'}, {value: 'Shenzhen',label: '深圳'}, {value: 'Guangzhou',label: '广州'}, {value: 'Dalian',label: '大连'}]}],value: ''}}}
</script>

8.可搜索

可以利用搜索功能快速查找选项

为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

<template><el-select v-model="value" filterable 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 {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: ''}}}
</script>

9.远程搜索

从服务器搜索数据，输入关键字进行查找

为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

<template><el-selectv-model="value"multiplefilterableremotereserve-keywordplaceholder="请输入关键词":remote-method="remoteMethod":loading="loading"><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 {options: [],value: [],list: [],loading: false,states: ["Alabama", "Alaska", "Arizona","Arkansas", "California", "Colorado","Connecticut", "Delaware", "Florida","Georgia", ]}},mounted() {this.list = this.states.map(item => {return { value: `value:${item}`, label: `label:${item}` };});},methods: {remoteMethod(query) {if (query !== '') {this.loading = true;setTimeout(() => {this.loading = false;this.options = this.list.filter(item => {return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;});}, 200);} else {this.options = [];}}}}
</script>

10.创建条目

可以创建并选中选项中不存在的条目

使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

<template><el-selectv-model="value"multiplefilterableallow-createdefault-first-optionplaceholder="请选择文章标签"><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 {options: [{value: 'HTML',label: 'HTML'}, {value: 'CSS',label: 'CSS'}, {value: 'JavaScript',label: 'JavaScript'}],value: []}}}
</script>

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

 

http://www.lryc.cn/news/159735.html

相关文章：

  • PCL 基于任意四点计算球心坐标
  • 飞书即时消息无需API开发连接Cohere，打造飞书AI智能问答助手
  • FPGA实现Cordic算法——向量模式
  • 【常用代码14】el-input输入框内判断正则，只能输入数字，过滤汉字+字母。
  • [NLP]LLM--使用LLama2进行离线推理
  • 初始化一个Gin框架的Go-Web项目
  • Mybatis日期检索格式报错
  • 如何把Android Framework学彻底？一条龙学习
  • uview indexList 按字母跳转不了
  • 安全模型中的4个P
  • 网站优化搜索引擎与关键词
  • aws-msk-托管kafka集群的简单使用（VPC内部访问：无验证和SASL认证）
  • Unity UGUI（二）核心组件
  • 代码随想录二刷第二天(Python)
  • Mybatis学习笔记1 Mybatis入门
  • Spark 管理和更新Hadoop token 流程
  • Android文件关联
  • java操作adb查看apk安装包包名【搬代码】
  • 【JAVA】Object类与抽象类
  • 【设计模式】二、UML 类图概述
  • 百望云亮相服贸会 重磅发布业财税融Copilot
  • vue 项目代码混淆配置（自定义插件适用）带配置项注释
  • 手写Spring：第7章-实现应用上下文
  • Java（三）逻辑控制（if....else，循环语句）与方法
  • 通过API接口实现数据实时更新的方案（InsCode AI 创作助手）
  • 分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测
  • el-dialog无法关闭
  • MATLAB算法实战应用案例精讲-【大模型】LLM算法（最终篇）
  • Mac brew -v 报错 fatal: detected dubious ownership in repository
  • Docker镜像、容器、仓库及数据管理