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

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

组件实现基于 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.mrgr.cn/news/3773.html

相关文章:

  • 如何用3个月零基础入门网络安全?_网络安全零基础怎么学习
  • go中的并发处理
  • wsl2 airsim wairing for connect (Windows11 UE4.27)问题解决
  • excel卓越之道笔记
  • 如何在没有密码的情况下解锁Oppo手机?5 种简单的方法
  • [Zer0pts2020]Can you guess it?1
  • 电脑硬盘坏了怎么恢复数据?
  • Secure Coding in C and C ++ (四)局部静态构造函数 虚函数
  • C#学习之路day1
  • qt
  • 【案例52】oracle进程占用CPU100%分析实战
  • 文件传送协议:FTP 的工作原理与应用
  • 设计资讯 | 微型无线双麦克风:时间胶囊风格、功能强大
  • spring定时器@Scheduled异步调用
  • 望繁信科技入选2024年第3批上海市高新技术成果转化项目名单
  • AMD E1-1200可以用作nas服务器吗
  • 在Ubuntu16.04里安装ROS Kinetic
  • `HTTP/2` 的服务器推送功能和 `Socket.IO` 对比
  • ## 已解决:`java.sql.SQLSyntaxErrorException: SQL语法错误` 异常的正确解决方法,亲测有效!!! ###
  • DRF——请求的封装与版本管理