diff --git a/examples/search-table-react/030-table-summay.md b/examples/search-table-react/030-table-summay.md index a004412..7fc614b 100644 --- a/examples/search-table-react/030-table-summay.md +++ b/examples/search-table-react/030-table-summay.md @@ -285,3 +285,55 @@ const Demo = () => { export default Demo ``` + +## 嵌套表头 + +```jsx +import { Tag } from 'antd' +import { sleep } from '@examples/utils' +import schema from './helpers/schema' +import treeColumns from './helpers/columns-tree' +import createDataSource from './helpers/createDataSource' +import SearchTable from '@schema-render/search-table-react' + +const Demo = () => { + const actionItems = () => [{ text: '编辑' }, { text: '删除' }] + + return ( + { + await sleep() + const data = createDataSource(searchParams.pageSize) + + // 计算商品合计总价 + const totalPrice = data + .reduce((total, item) => total + item.goods_price, 0) + .toFixed(2) + + // 返回表格数据渲染 + return { + // 表格数据 + data, + // 数据总数,用于分页 + total: 100, + // 合计栏数据 + summaryData: { + supplier_code: 自定义内容, + goods_price: totalPrice, + }, + } + }} + /> + ) +} + +export default Demo +``` diff --git a/examples/search-table-react/helpers/columns-tree.ts b/examples/search-table-react/helpers/columns-tree.ts new file mode 100644 index 0000000..d2f24e2 --- /dev/null +++ b/examples/search-table-react/helpers/columns-tree.ts @@ -0,0 +1,70 @@ +import type { ISearchTableProps } from '@schema-render/search-table-react' + +const columns: ISearchTableProps['table']['columns'] = [ + { + title: '供应商名称', + dataIndex: 'supplier_name', + width: 130, + }, + { + title: '供应商编码', + dataIndex: 'supplier_code', + }, + { + title: '单据编号', + dataIndex: 'bill_no', + width: 130, + }, + { + title: '单据信息', + children: [ + { + title: '单据类型', + dataIndex: 'bill_type', + }, + { + title: '单据日期', + dataIndex: 'bill_date', + width: 120, + }, + { + title: '单据状态', + dataIndex: 'bill_status', + }, + ], + }, + { + title: '制单人', + dataIndex: 'operator', + }, + { + title: '商品信息', + children: [ + { + title: '商品名称', + dataIndex: 'goods_name', + width: 130, + }, + { + title: '商品价格(元)', + dataIndex: 'goods_price', + }, + { + title: '商品编码', + dataIndex: 'goods_code', + width: 130, + }, + { + title: '商品分类', + dataIndex: 'goods_category', + }, + { + title: '商品日期', + dataIndex: 'goods_date', + width: 120, + }, + ], + }, +] + +export default columns