通用列表 · AntDesign

核心 API 请查阅 通用列表-基础篇，本文档仅说明 AntDesign 框架下的特化配置。

导入路径

import { $initHook, $JiessTable } from '@jiess/plus/react';

AntDesign 表格组件映射

Jiess 概念	AntDesign 组件	说明
$JiessTable	Table + Pagination	PC 端表格 + 分页
$Search	Form (inline)	搜索栏
$field	Table.Column	表格列
$tools	Button 组 + Space	操作按钮

AntDesign 特有属性

表格透传属性

$JiessTable({
    rowKey: 'id',
    action: '/api/users',
    // 以下透传给 antd Table
    bordered: true,
    size: 'small',           // 'large' / 'middle' / 'small'
    showHeader: true,
    sticky: true,            // 表头固定
    scroll: { x: 1200, y: 500 },
    // 以下透传给 antd Pagination
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => `共 ${total} 条`,
});

列透传属性

$JiessTable({
    $fields: [
        {
            $label: '姓名',
            $name: 'name',
            $width: 120,
            // 以下透传给 antd Table.Column
            fixed: 'left',
            sorter: true,
            ellipsis: true,
            align: 'center',
        },
    ],
});

自定义列渲染（JSX）

$JiessTable({
    $fields: [
        {
            $label: '操作',
            $TableField: {
                render(row) {
                    return (
                        <Space>
                            <Button type="primary" onClick={() => edit(row)}>编辑</Button>
                            <Button danger onClick={() => del(row)}>删除</Button>
                        </Space>
                    );
                },
            },
        },
    ],
});

注意事项

事项	说明
Pagination	分页参数自动映射：fieldPage→current、fieldPageSize→pageSize
Table v4	兼容 Ant Design 4.x（适配层处理了 API 差异）
locale	可通过 locale 属性设置中文/英文等国际化
expandable	支持行展开（expandedRowRender）

实战示例

示例1：数据管理列表（搜索 + 排序 + 操作 + 分页）

$JiessTable({
    rowKey: 'id',
    action: '/api/users',
    bordered: true,
    size: 'middle',
    sticky: true,
    scroll: { x: 1000 },
    // 搜索栏
    $search: {
        $content: {
            keyword: {
                $Input: {
                    $label: '关键词',
                    placeholder: '搜索姓名/邮箱',
                    allowClear: true,
                },
            },
            status: {
                $Select: {
                    $label: '状态',
                    options: [
                        { label: '全部', value: '' },
                        { label: '启用', value: 1 },
                        { label: '禁用', value: 0 },
                    ],
                },
            },
        },
    },
    // 表格列
    $fields: [
        { $label: '姓名', $name: 'name', $width: 120, sorter: true, ellipsis: true },
        { $label: '邮箱', $name: 'email', $width: 220, ellipsis: true },
        { $label: '手机号', $name: 'phone', $width: 140 },
        { $label: '状态', $name: 'status', $width: 80, align: 'center' },
        { $label: '创建时间', $name: 'createTime', $width: 180, sorter: true },
        {
            $label: '操作',
            $TableField: {
                render(row) {
                    return (
                        <Space>
                            <Button type="link" onClick={() => editRow(row)}>编辑</Button>
                            <Popconfirm title="确认删除？" onConfirm={() => deleteRow(row)}>
                                <Button type="link" danger>删除</Button>
                            </Popconfirm>
                        </Space>
                    );
                },
            },
        },
    ],
    // 分页
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => `共 ${total} 条记录`,
    pageSizeOptions: ['10', '20', '50'],
});

示例2：多选 + 批量操作

$JiessTable({
    rowKey: 'id',
    action: '/api/users',
    bordered: true,
    // 顶部工具栏
    $header: {
        $left: {
            $Button: {
                children: '批量删除',
                danger: true,
                onClick: () => {
                    Modal.confirm({
                        title: '确认批量删除？',
                        content: `已选择 ${selectedRowKeys.length} 条记录`,
                        onOk: () => batchDelete(selectedRowKeys).then(() => tableRef.current.doLoad()),
                    });
                },
            },
        },
        $right: {
            $Button: {
                children: '新增用户',
                type: 'primary',
                onClick: () => dialog.open({ /* */ }),
            },
        },
    },
    $fields: [
        // 选择列通过 rowSelection 配置
        { $label: '姓名', $name: 'name', $width: 120 },
        { $label: '邮箱', $name: 'email', $width: 200 },
        { $label: '状态', $name: 'status', $width: 80 },
    ],
    // antd Table 的 rowSelection 配置
    rowSelection: {
        type: 'checkbox',
        onChange: (selectedRowKeys, selectedRows) => {
            // 更新选中状态
        },
    },
});

示例3：可展开行 + 嵌套子表格

$JiessTable({
    rowKey: 'id',
    action: '/api/orders',
    bordered: true,
    $fields: [
        { $label: '订单号', $name: 'orderNo', $width: 180 },
        { $label: '客户', $name: 'customerName', $width: 120 },
        { $label: '总金额', $name: 'amount', $width: 100 },
        { $label: '状态', $name: 'status', $width: 80 },
    ],
    // antd Table 展开行配置
    expandable: {
        expandedRowRender: (record) => (
            <Table
                rowKey="productId"
                dataSource={record.items}
                pagination={false}
                size="small"
            >
                <Table.Column title="商品名称" dataIndex="productName" />
                <Table.Column title="单价" dataIndex="price" width={100} />
                <Table.Column title="数量" dataIndex="qty" width={80} />
                <Table.Column title="小计" dataIndex="subtotal" width={100} />
            </Table>
        ),
        rowExpandable: (record) => record.items && record.items.length > 0,
    },
});

下一步

• 通用列表-基础篇 — 列表核心 API（分页/搜索/排序/数据请求）