演示地址
下载地址

为偷懒而开发：

1. 多级表头，默认子集占父级宽度50%，flex布局
2. 根据设置自动生成搜索区
3. 搜索区可设置默认展开/收起
4. 可以设置左右固定列，多选框及索引列默认左侧固定
5. 用户可自主设置展示列
6. 组件内部翻页、刷新及搜索事件处理
7. 组件内flex垂直布局模式
8. 透传uni-table的props，events
9. 内置常用表单按钮，emits返回相关数据
10. 丰富的slots
11. 可单选，多选

依赖

uni-table
uni-pagination
mosowe-form
mosowe-dropdown

props

注意

1. 组件内部使用flex垂直布局，最外层元素宽高设置为100%，所以建议组件的父级元素应该设置固定高度，且y轴可滚动。
2. 可通过ref操作uni-table等组件methods

columnItem

rowOperation

tableProps

toolbarString

paginationConfig

searchConfig

参考mosowe-form的nameConfig配置，其中col，hide，visible配置无效

enumItem

exportSelectConfigObject

emits

slots

示例代码

<template><mosowe-table:column="column":requestMethod="requestMethod"dataListKey="content"dataTotalKey="totalCount"rowOperationWidth="100"showIndex:tableProps="{type: 'selection'}":rowOperation="rowOperation"@onAdd="onAdd"@onDelete="onDelete"@onSelectionChange="selectionChange"@onSortChange="onSortChange"@onSearchChange="onSearchChange"></mosowe-table>
</template><script setup lang="ts">
import { ref } from 'vue';
const app = getApp().globalData;
app?.checkLogin();const requestMethod = (query: any) => {return new Promise((resolve) => {console.log('query', query);setTimeout(() => {resolve({code: 0,data: {content: Array.from({ length: query.pageSize }).map((_, index) => {return {name: '测试' + Date.now().toString().substring(9) + '-' + index,name2: '测试2',sex: index % 3,age: 20,date: Date.now()};}),totalCount: 100},msg: ''});}, 1000);});
};const initBefore = (data: any) => {return {list: data.data.list.map((item: any) => ({ ...item, name: '我改了' })),total: data.data.total};
};
const onSortChange = (obj: any) =>{console.log('onSortChange',obj)
}const selectionChange = (data: any) => {console.log('selectionChange',data)
}const localData = Array.from({ length: 50 }).map((_, index) => {return {name: '测试',name2: '测试2',sex: index % 3,age: 20,date: Date.now()};
});
const rowOperation = [{text: '编辑',type: 'text',isShow: true,config: {color: '#409eff'},click: (row: any) => {console.log('编辑', row);}},{text: '删除',type: 'text',isShow: true,config: {sizi: 'mini',type: 'primary',style: {height: '20px',lineHeight: '20px',fontSize: '12px'}},click: (row: any) => {console.log('删除', row);}}
];const onSearchChange = (name: any,value: any) => {console.log(name,value)if (name ==='name') {column.value[2].enum = [{text: '男',value: 0},{text: '女',value: 1}]}
}const column = ref([{text: '姓名',value: 'name',fixed: 'right',sortable: true,search: {type:'input',unionName: 'date=2023-02-01'}},{text: '姓名2',value: 'name2',width:'150',fixed: 'right'},{text: '性别',value: 'sex',width: '300',search: true,enum: [{text: '男',value: 0},{text: '女',value: 1},{text: '未知',value: 2}]},{text: '年龄',value: 'age',search: true,},{text: '创建时间',value: 'date',searchOrder:12,search: {type: 'date',defaultValue: '2021-02-1',transform:(value: any)=>{return {time: value}}}}
]);const onAdd = () => {console.log('onAdd');
};
const onDelete = (data: any) => {console.log('onDelete', data);
};
</script><style lang="scss" scoped></style>