ElementUI浅尝辄止37:Select 选择器

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

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.远程搜索

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

为了启用远程搜索,需要将filterableremote设置为true,同时传入一个remote-methodremote-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.mzph.cn/news/72704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Meta 验证徽章:为何大家都想在 FB 和 IG 上获得元验证

随着 Meta&#xff08;前身为 Facebook&#xff09;和 Instagram 统治数字领域&#xff0c;Meta Verified 徽章已成为真实性的终极象征。无论您是公众人物还是品牌&#xff0c;在Facebook和Instagram上获得此徽章都会对您的在线形象产生深远的影响。Facebook验证于2013年首次推…

【文字到语音的论文总结】

1.文字到语音的整个过程 文字到语音的一般整体结构 主要是下面这个流程&#xff0c;每个网络可能会把其中两者或是三者融合在一起来&#xff1b; 长度不同的问题 生成的语音可能和文字的长度并不一样&#xff0c;因此需要解决这个问题 Tactron使用的是交叉注意力的方式解…

Vue + Element UI 前端篇(十):动态加载菜单

Vue Element UI 实现权限管理系统 前端篇&#xff08;十&#xff09;&#xff1a;动态加载菜单 动态加载菜单 之前我们的导航树都是写死在页面里的&#xff0c;而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。 我们在这里就用上一篇准备好的数据格式Mock出模…

vue3项目,点击分页器,列表接口请求两次的问题

接手别人做的项目&#xff0c;出现了一个分页器bug&#xff0c;vue3element plus&#xff0c;记录一下。 点击分页器&#xff0c;却出现了调用两次列表接口的情况&#xff0c;并且第二次请求&#xff0c;分页器的pageNum自动变成1&#xff0c;这样就导致了分页器bug&#xff0…

k8s部署redis 3主3从

k8s部署redis6节点&#xff0c;组成3主3从集群模式 一般来说&#xff0c;redis部署有三种模式。 单实例模式&#xff0c;一般用于测试环境。 哨兵模式 集群模式后两者用于生产部署 哨兵模式 在redis3.0以前&#xff0c;要实现集群一般是借助哨兵sentinel工具来监控master节点…

1.4 空间中的曲线和曲面

空间中的曲线与曲面 知识点1 曲面方程定义 定义1 如果曲面 S 与方程F (x,y,z ) 0 有下述关系&#xff1a; &#xff08;1&#xff09; 曲面 S 上的任意点的坐标都满足此方程 &#xff08;2&#xff09;不在曲面S上的点的坐标不满足此方程 则F&#xff08;x,y,z&#xff0…

element-plus 表格-定位到指定行

表格数据量一页占不下的时候&#xff0c;需要定位到指定的行&#xff0c;显示在可视区域中。采用 scrollTo滚动到一组特定坐标(options: ScrollToOptions | number, yCoord?: number) 核心代码 /** 滚动到指定行 tableScrollToRowtableElement&#xff1a;表格元素 instal…

Redis 集群

1. 是什么 1.1 定义 由于数据量过大&#xff0c;单个Master复制集难以承担&#xff0c;因此需要对多个复制集进行集群&#xff0c;形成水平扩展每个复制集只负责存储整个数据集 的一部分&#xff0c;这就是Redis的集群&#xff0c;其作用是提供在多个Redis节点间共享数据的程序…

从零学算法235

235.给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个结点 p、q&#xff0c;最近公共祖先表示为一个结点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以是它…

103.36.167.X在服务器删除、复制文件的时候会出现卡的情况,是什么原因?

服务器硬盘在删除文件或复制文件时出现卡顿情况可能有多种原因。以下是一些常见的问题和解决方法&#xff1a; 硬盘性能低下&#xff1a;如果服务器硬盘的读写速度较慢&#xff0c;可能会导致卡顿现象。解决方法可以是升级到更高性能的硬盘或者使用RAID技术提升硬盘读写速度。 …

K8S原理架构与实战教程

文章目录 一、背景1.1 物理机时代、虚拟机时代、容器化时代1.2 容器编排的需要 二、K8S架构2.2 Worker节点 三、核心概念3.1 Pod3.2 Deployment3.3 Service3.4 Volume3.5 Namespace 四、K8S安装五、kubectl常用命令六、K8S实战6.1 水平扩容6.2 自动装箱6.2.1 节点污点6.2.2 Pod…

pico学习进程记录已经开发项目

Pico pin脚定义 Pico 运行准备 下载uf2文件 https://pico.org.cn/ &#xff08;注意运行micropython的文件和运行c/c的不一样&#xff09; 装载uf2文件&#xff1a;按住pico的按键&#xff0c;然后通过micro usb连接电脑&#xff08;注意&#xff1a;如果用的线材&#xff0c…

LeetCode刷题笔记【27】:贪心算法专题-5(无重叠区间、划分字母区间、合并区间)

文章目录 前置知识435. 无重叠区间题目描述参考<452. 用最少数量的箭引爆气球>, 间接求解直接求"重叠区间数量" 763.划分字母区间题目描述贪心 - 建立"最后一个当前字母"数组优化marker创建的过程 56. 合并区间题目描述解题思路代码① 如果有重合就合…

打造西南交通感知新范式,闪马智能携手首讯科技落地创新中心

9月4日&#xff0c;2023年中国国际智能产业博览会&#xff08;以下简称“智博会”&#xff09;在重庆拉开帷幕。大会期间&#xff0c;由上海闪马智能科技有限公司&#xff08;以下简称“闪马智能”&#xff09;与重庆首讯科技股份有限公司&#xff08;以下简称“首讯科技”&…

后端/DFT/ATPG/PCB/SignOff设计常用工具/操作/流程及一些文件类型

目录 1.PD/DFT常用工具及流程 1.1 FC和ICC2 1.2 LC (Library compiler) 1.3 PrimeTime 1.4 Redhawk与PA 1.5 Calibre和物理验证PV 1.6 芯片设计流程 2.后端、DFT、ATPG的一些常见文件 2.1 LEF和DEF 2.2 ATPG的CTL和STIL 2.3 BSDL 2.4 IPXCT 3.PCB设计的一些工作和工…

数学建模:模糊综合评价分析

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 数学建模&#xff1a;模糊综合评价分析 文章目录 数学建模&#xff1a;模糊综合评价分析综合评价分析常用评价方法一级模糊综合评价综合代码 多级模糊综合评价总结 综合评价分析 构成综合评价类问题的五个…

【Leetcode打卡冲冲冲】

文章目录 121.买卖股票的最佳时机 121.买卖股票的最佳时机 解题思路 1.本题目的是获得利润最大。 2.根据目来设计&#xff0c;区间内利润最大值> 因为数据是顺序的不可逆&#xff0c;可以选择当前位置与历史区间的最小成本&#xff0c;与最大利润。 3.当处理完整个数据&…

【SpringMVC]获取参数的六种方式

目录 1.通过ServletAPI获取 2.通过控制器方法的形参获取 3.RequestParam&#xff1a;将请求参数和控制器方法的形参绑定 4.RequestHeader&#xff1a;将请求头信息与控制器方法的形参的值进行绑定 5. CookieValue&#xff1a;将cookie数据和控制器方法的形参绑定 Cookie&…

gitlab 点击Integrations出现500错误

背景&#xff1a;在新服务器重新搭建了gitlab&#xff0c;并导入原来gitlab的备份&#xff0c;在项目中点击点击Integrations出现500错误。 解决方法&#xff1a;1.进入新服务器&#xff0c;将 /etc/gitlab/gitlab-secrets.json重命名为 /etc/gitlab/gitlab-secrets.json.bak …

yo!这里是进程控制

目录 前言 进程创建 fork()函数 写时拷贝 进程终止 退出场景 退出方法 进程等待 等待原因 等待方法 1.wait函数 2.waitpid函数 等待结果&#xff08;status介绍&#xff09; 进程替换 替换原理 替换函数 进程替换例子 shell简易实现 后记 前言 学习完操作…