演示地址
下载地址
为偷懒而开发：
- 多级表头，默认子集占父级宽度50%，flex布局
- 根据设置自动生成搜索区
- 搜索区可设置默认展开/收起
- 可以设置左右固定列，多选框及索引列默认左侧固定
- 用户可自主设置展示列
- 组件内部翻页、刷新及搜索事件处理
- 组件内flex垂直布局模式
- 透传uni-table的props，events
- 内置常用表单按钮，emits返回相关数据
- 丰富的slots
- 可单选，多选
依赖
uni-table
uni-pagination
mosowe-form
mosowe-dropdown
props
| 属性 |
类型 |
默认 |
说明 |
| column |
columnItem[] |
- |
列配置，排列顺序即为表格顺序 |
| localData |
array |
|
本地数据列表，与requestMethod不能同时为空，优先级最高 |
| requestMethod |
function |
|
数据获取的方法，接受一个promise返回的方法，其then方法的回调参数res={code，data，msg}格式，data包含了dataListKey，dataTotalKey，若不满足可以使用initBefore处理 |
| autoRequest |
boolean |
true |
是否自动请求数据，即页面加载完就请求 |
| rowOperation |
rowOperation[] |
|
表格行末尾的操作选项列表，即操作列 |
| rowOperationWidth |
string |
100 |
操作列宽度 |
| tableProps |
object |
|
表格uni-table的props配置，loading属性无效，已被组件内部处理了，如需请使用ref调用 |
| title |
string |
|
左上角表格名称 |
| initBefore |
function |
|
表格通过requestMethod获取数据后渲染页面前数据处理，参数为接口返回数据res，return值为{list，total}结构，list、total为固定字段 |
| dataListKey |
string |
list |
requestMethod时数据列表的键名 |
| dataTotalKey |
string |
total |
requestMethod时数据总数的键名 |
| toolbar |
boolean/toolbarString |
true |
表格常用工具展示，默认true展示全部，false不展示，值为toolbarString时展示相关按钮，多个英文逗号分隔 |
| pagination |
boolean/paginationConfig |
true |
分页器配置，默认true显示，组件默认配置为{current：1，pageSize：10}，false不展示，翻页功能添加了节流处理，点击翻页300ms后请求数据 |
| defaultOpenSearch |
boolean/number |
false |
是否默认展开搜索区，或者默认展开多少项，配置为number的时候，默认显示‘收起’按钮，点击收起的时候，只展示一行 |
| autoHeight |
boolean |
false |
不限制高度，自动增加 |
| maxHeight |
string |
- |
最大高度，低于最大高度的时候，高度自适应，优先级高于autoHeight |
| showIndex |
boolean |
false |
显示序号 |
| exportSelectConfig |
exportSelectConfigObject |
|
导出已选配置 |
| radio |
boolean |
false |
tableProps.type === 'selection'时单选，单选时只能在当前页选中，跨页清空 |
注意
- 组件内部使用flex垂直布局，最外层元素宽高设置为100%，所以建议组件的父级元素应该设置固定高度，且y轴可滚动。
- 可通过ref操作uni-table等组件methods
columnItem
| 属性 |
类型 |
可选 |
说明 |
| text |
string |
|
列表头名称 |
| value |
string |
|
列单元格键名 |
| width |
string |
|
单元格宽度 |
| fixed |
string |
left/right |
固定位置，多选和序号固定在左侧，只针对一级表头，该项设置时列宽度默认100px |
| hideInTable |
boolean |
|
在表格中不显示，仅一级表头生效 |
| mustShow |
boolean |
|
该列在表中必须展示，不能被用户隐藏，仅一级表头生效 |
| align |
string |
left/center/right |
表头对齐方式 |
| filter-type |
string |
search/select/range/date |
筛选类型，仅一级表头生效，search关键字搜索，select类别选择 |
| filter-data |
array |
|
筛选数据，仅一级表头生效 |
| sortable |
boolean |
|
是否启用排序，仅一级表头生效 |
| searchOrder |
number |
|
在搜索区的排列权重，越大越靠前 |
| search |
boolean/searchConfig |
|
是否可搜索，默认false，为true会根据是否包含enum字段选择显示input还是select |
| enum |
enumItem[] |
|
枚举数组，若列表数据字段为enum的value，则会自动替换展示enum的text |
| children |
columnItem[] |
|
子表头 |
rowOperation
| 属性 |
类型 |
可选 |
说明 |
| text |
string |
|
按钮文案 |
| click |
function |
|
按钮点击事件，回调参数为行数据 |
| isShow |
boolean |
|
是否显示，用于权限配置 |
| type |
string |
text/button |
按钮类型 |
| config |
object |
|
type=button的props配置，或type=text时文字颜色等样式设置 |
tableProps
| 属性 |
类型 |
默认 |
说明 |
| border |
boolean |
false |
是否带有纵向边框 |
| stripe |
boolean |
true |
是否显示斑马线样式 |
| type |
string |
|
值为type=“selection” 时开启多选 |
| emptyText |
string |
没有更多数据 |
空数据时显示的文本内容 |
toolbarString
| 值 |
说明 |
| export |
导出按钮，默认文案：导出 |
| exportChoose |
导出已选按钮，默认文案：导出已选，组件内置导出功能，导出原始表格列表数据，与右上角列显隐无关，多级表头只导出子集表头，有配置enum的会转文案后输出 |
| add |
新增按钮，默认文案：新增 |
| download |
下载模板按钮，默认文案：下载模板</ |
该组件是一个为简化开发而设计的表格，具备多级表头、自定义搜索区、可配置的展开/收起状态、固定列以及灵活的列展示设置。支持单选、多选和数据导出功能，内置分页和排序机制，提供丰富的事件处理和插槽定制。
扫一扫
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
