Skip to content

Table 抽象

子凡 edited this page Jul 12, 2019 · 3 revisions

方案一(临时方案):

描述方式:一个 Table

列通过 columns配置,改方案不够通用,现已作废,方案二更为通用

数据格式:

{
    "componentName": "Table",
    "props": {
        "bordered": true,
        "columns": [
            {
                "dataIndex": "id",
                "title": "ID"
            },
            {
                "dataIndex": "title",
                "title": "页面标题"
            },
            {
                "dataIndex": "status",
                "renderConfig": {
                    "childrenTemplate": "${text}",
                    "name": "Tag",
                    "props": {
                        "color": "blue"
                    }
                },
                "title": "状态"
            },
            {
                "dataIndex": "timestampCreate",
                "title": "创建时间",
                "filter": [
                    "formatDate",
                    "YYYY-MM-DD HH:mm"
                ]
            },
            {
                "dataIndex": "timestampUpdate",
                "title": "操作时间",
                "filter": [
                    "formatDate",
                    "YYYY-MM-DD HH:mm"
                ]
            },
            {
                "dataIndex": "action",
                "fixed": "right",
                "width": 100,
                "renderConfig": {
                    "children": "action",
                    "childrenNodes": [
                        {
                            "children": "查看",
                            "name": "a",
                            "props": {
                                "href": "javascript:;",
                                "style": {
                                    "marginRight": "8px"
                                },
                                "target": "_blank"
                            },
                            "propsTemplate": {
                                "href": "./index.html#/page/${row.id}"
                            }
                        },
                        {
                            "children": "编辑",
                            "name": "a",
                            "props": {
                                "href": "javascript:;"
                            },
                            "propsTemplate": {
                                "href": "./index.html#/m/workbench/${row.id}"
                            }
                        }
                    ],
                    "name": "div"
                },
                "title": "操作"
            }
        ],
        "dataSource": "$parent.data",
        "loading": "$parent.loading",
        "rowKey": "id",
        "defaultExpandAllRows": true,
        "childrenColumnName": "children"
    },
    "pe": [
        "dataSource",
        "loading"
    ]
}

方案二(通用方案):

描述方式:1 Table + N TableColumn + N TableColumnGroup + N 其它组件

列通过 TableColumn、TableColumnGroup 组合更加通用

数据格式:

{
    "componentName": "Table",
    "props": {
        "rowKey": "key",
        "columns": [],
        "dataSource": "$parent.data",
        "loading": "$parent.loading",
        "showHeader": true,
        "bordered": true,
        "size": "default",
        "childrenColumnName": "children",
        "defaultExpandAllRows": false
    },
    "pe": [
        "dataSource",
        "loading"
    ]
}

{
    "componentName": "TableColumn",
    "props": {
        "align": "left",
        "dataIndex": "id",
        "title": "ID"
    }
}

// ……

{
    "componentName": "TableColumn",
    "props": {
        "align": "center",
        "dataIndex": "action",
        "title": "操作"
    }
}
Clone this wiki locally