下拉表格选择器ReTableSelect组件(API)

news2024/11/29 20:51:27

组件实现基于 Vue3 + Element Plus + Typescript,同时引用 vueUse + lodash-es + tailwindCss (不影响功能,可忽略)

基于ReTable和Popover组件封装的下拉表格选择器组件,支持本地分页以及远程请求两种方式。

交互与展示尽量的与ElSelect保持一致。

下拉表格选择器ReTableSelect

基于ReTable和Popover组件实现的下拉表格选择组件,尽量保持了与ElSelect相同的交互方式和配置,降低学习成本。

基础用法

建议表格max-height,否则容易出现溢出效果,同时表格的内容建议不换行展示,设置单元格内容溢出省略展示。

查看 /demo/table-select/basic.md

在这里插入图片描述

:::warning

columns如果存在复用,建议使用shallowRef,避免深层响应导致无限渲染内存溢出。

:::

单选

设置 multiple=false 设置单选。直接通过点击行进行选中。

查看 /demo/table-select/single.md
在这里插入图片描述

带禁用状态

设置 disabled 整个选择器将不可用

查看 /demo/table-select/disabled.md
在这里插入图片描述

部分选项禁用

可以通过 selectable 属性控制选项是否被禁用

查看 /demo/table-select/selectable.md
在这里插入图片描述
在这里插入图片描述

带清空

设置 clearable 在有选中值的时候可以展示清空图标

查看 /demo/table-select/clearable.md
在这里插入图片描述

带过滤

除了列配置自带的表头过滤,还支持通过 filterable 控制关键字搜索输入框,配合 filterProps 自定义关键字匹配的字段或者匹配方式

查看 /demo/table-select/filterable.md
在这里插入图片描述
在这里插入图片描述

不分页

设置 pagination=false 表格不分页

查看 /demo/table-select/pagination.md
在这里插入图片描述

多选tags展示

多选模式下设置 show-tags=true ,将按tag方式展示已选选项,可以配合 collapseTagscollapseTagsTooltip 以及 maxCollapseTags 这三个字段控制折叠tags的展示。

查看 /demo/table-select/show-tags.md
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

远程请求

同ReTable远程请求一致,通过 remote 开启远程请求模式,提供 remote-method 请求方法或者监听 query 事件手动发起请求。

查看 /demo/table-select/remote.md
在这里插入图片描述

:::warning
组件不支持data-responsive/auto-remote,所以在remote-method或者query事件处理器函数内需要响应式更新data/total字段

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2059847.html

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

相关文章

倍思Eil这款耳机怎么样吗?南卡、倍思、QCY四款开放式耳机无广避坑测评!

近期,我近期,我注意到后台有许多小伙伴向我咨询如何挑选合适的开放式耳机。市场上开放式耳机品牌琳琅满目,它们在音质表现、佩戴舒适度以及综合性能上均展现出各自的差异。对于追求耳朵极致舒适体验的朋友而言,选择一款合适的开放…

Qt5 编译 Qt creator 源码中的 designer 模块

文章目录 下载 Qt Creator 源码 下载 Qt Creator 源码 Github: https://github.com/qt/qttools 笔记打算用 Qt 5.12.12 来编译 qt creator-designer 所以笔者下载的是 tag - 5.12.12 ,解压后如下,先删除多余的文件,后续还要删除更多文件方便…

教程:使用Python裁剪TIF影像为多个自定义大小的小块(分割栅格)

教程:使用Python裁剪TIF影像为多个自定义大小的小块(分割栅格) 随着遥感技术的不断发展,影像数据的处理和分析在地理信息系统(GIS)和遥感领域显得尤为重要。在实际项目中,处理大规模的TIF影像数据往往需要对影像进行裁…

【原创】java+swing+mysql房屋租赁管理系统设计与实现

个人主页:程序员杨工 个人简介:从事软件开发多年,前后端均有涉猎,具有丰富的开发经验 博客内容:全栈开发,分享Java、Python、Php、小程序、前后端、数据库经验和实战 文末有本人名片,希望和大家…

进程的退出概念

进程退出 缺页中断(补充)页表中的权限位进程退出异常exit 缺页中断(补充) 之前我们了解了页表相关的知识,现在问大家一个问题,用new和malloc开辟内存的时候是虚拟内存还是物理内存呢? 答案是虚…

谷粒商城实战笔记-231-商城业务-认证服务-单点登录简介

文章目录 一,跨域名共享登录1,父子域名共享登录2,跨域名登录 二,单点登录-SSO单点登录的必要性单点登录的原理 三,XXL-SSO,开源的单点登录解决方案 一,跨域名共享登录 1,父子域名共…

OSPF-基础多区域实验

1.ENSP下载 阿里云盘分享 ⭐/*无需密钥 免费下载 安装不成功,可关注并私信博主*/ 2.OSPF的基础需求和规则 实验规则: 1.接口地址→XY.XY.XY.R /24 X:两者之间最小的 Y:两者之间最大的 R:谁的接口就是谁的编号 以R1和R2之间的连接为例&#xff0…

中国植物性状数据库

中国植物性状的研究主要集中在植物的生理结构和功能,‌以及它们对环境的适应性上。‌中国植物性状的多样性体现在多个方面,‌包括植物的生理结构、‌生长习性、‌以及对环境的适应性等。 中国植物性状数据库,包含了来自140个样点的1529种植物…

Leetcode876. 链表的中间结点(双指针)

题目描述 给你单链表的头结点 head ,请你找出并返回链表的中间结点。 如果有两个中间结点,则返回第二个中间结点。 示例: 示例 1: 输入:head [1,2,3,4,5] 输出:[3,4,5] 解释:链表只有一个中…

游泳耳机哪个品牌好?四大热门爆款游泳耳机实测体验速览!

游泳耳机作为水下运动的伴侣,有着不少喜爱的人群。然而,也有一部分人对其保持距离,原因往往是担心水下耳机进水损坏。但只要我们避开那些缺乏专业技术实力的产品,就能享受水下音乐带来的无限乐趣。作为一名资深音乐爱好者和游泳教…

减震组装对于哪些无人机是必不可少的!你知道吗?

高精度无人机 对于需要搭载高精度传感器或进行高精度测量的无人机,如测绘无人机、环境监测无人机等,减震组装是必不可少的。这些无人机需要确保在飞行过程中传感器数据的准确性和稳定性,因此必须采用有效的减震措施。 载重无人机 载重无人…

个人收藏个性化、实用性、可玩性在线网站持续更新,与君共享

1.https://handraw.top/ 支持中文手绘效果的白板工具,比较怀旧复古风格 界面简单风 2.https://app.diagrams.net 流程图、UML图、网络图、组织结构图、思维导图等,比较专业 可导出图片 PDF HTLM等各种格式 3.https://www.processon.com 主要用于生成…

杜占朋人物风采

杜占朋,衡水名校校长,一位荣获全国杰出青年称号的杰出教育家,同时也是全国范围内备受尊崇的红色基因传承者。他以其卓越的学术成就、丰富的实践经验以及不懈的教育创新精神,成为了当代教育领域的璀璨明星。他身兼数职,…

一文速通 Vue 基础

1、Vue 概述 官方文档中文:https://staging-cn.vuejs.org/ 英文:Vue.js - The Progressive JavaScript Framework | Vue.js 1.1、什么是 MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF&#xff08…

C语言中的联合体和枚举类型

文章目录 🍊联合体🍊枚举类型 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以:点赞关注评论收藏(一键四连)哦~ 🍊联合体 1、概述   联合体该结构体的定义形式类似,但是它是所有的成…

信息安全保证人员CISAW:安全集成

信息安全保障人员认证(CISAW)在安全集成领域的认证,主要针对申请者在信息系统安全集成的知识和理论以及项目实施中的综合应用能力进行全面评估。 这一认证特别强调对申请者在安全集成方面的知识深度和利用这些知识分析、解决实际问题的能力的评价。 此外&#xff…

python初级爬虫实战:我是怎么用python下载音乐的

今天分享的内容是如何使用python下载歌曲和歌词信息,文章涉及内容主要为了帮助大家学习python技能,请大家合规合理使用。 如果你正在学习Python爬虫,但是找不到方向的话可以试试我这一份学习方法和籽料呀!点击 领取(不…

北斗对我们普通人的生活有什么影响?

自北斗卫星导航系统(BDS)全面覆盖全球以来,北斗导航在我们日常生活中的重要性与日俱增。本文将详细探讨北斗导航系统如何从方方面面改变我们普通人的生活。 1. 精准定位:现代生活的基石北斗系统最显而易见的影响体现在精准定位和导…

Linux:进程的概念,进程相关函数

一、进程的概念 1.进程 进程是系统进行资源分配和调度的一个独立单元,它是操作系统结构的基础。进程是程序的一次执行过程,包含了程序代码、当前活动、系统资源(如CPU、内存、文件等)的使用情况等信息。每个进程都有自己独立的内…

2024最强CSS基础知识大全(含代码)

CSS 什么是 CSS CSS(Cascading Style Sheets) 指层叠样式表,样式定义如何显示 HTML 的样式,样式通常存储在样式表中,把样式添加到 HTML5 中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率&#xf…