下拉表格选择器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字段

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iWangsd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值