组件实现基于
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方式展示已选选项,可以配合 collapseTags
和 collapseTagsTooltip
以及 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字段