table-render

Table Render

1. 设计文档 https://yuque.antfin-inc.com/nasa.wy/rx1nh9/ildeyo

2. 使用方法：

tnpm i -S @ali/one-table-render

import React from 'react';
import TableRender from '@ali/one-table-render';
import * as api from './mock';

const searchSchema = {
  "propsSchema": {
    "type": "object",
    "properties": {
      "position": {
        "title": "职级",
        "type": "string",
        "enum": ["p5", "p6", "p7", "p8", "p9"],
        "ui:width": "20%"
      },
      "name": {
        "title": "姓名",
        "type": "string",
        "ui:width": "20%"
      },
      "address": {
        "title": "地址",
        "type": "string",
        "ui:width": "60%"
      },
      "tags": {
        "title": "标签",
        "description": "下拉多选",
        "type": "array",
        "items": {
          "type": "string"
        },
        "enum": ["a", "b", "c", "d"],
        "enumNames": ["在杭", "单身", "95后", "土豪"],
        "ui:widget": "multiSelect",
        "ui:width": "40%"
      },
      "dateRange": {
        "title": "日期范围",
        "type": "range",
        "format": "dateTime",
        "ui:options": {
          "placeholder": ["开始时间", "结束时间"]
        },
        "ui:width": "60%"
      }
    }
  },
  "displayType": "row",
  "showDescIcon": true,
  "labelWidth": 80
}

const columns = [
  {
    title: '名字',
    key: 'name',
    type: 'link',
  },
  {
    title: '年龄',
    key: 'age',
  },
  {
    title: '地址',
    key: 'address',
  },
  {
    title: '标签',
    key: 'tags',
    type: 'tags',
  },
  {
    title: '状态',
    dataIndex: 'status',
    type: 'status',
  },
];

const schema = {
  // 搜索的配置
  searchConfig: {
    schema: searchSchema, // search的协议，使用FormRender的标准schema
    initialValue: {},
    tab: 0, // 选中的tab，如果没有多个不用填
    api: [
      { text: '全部', action: '$api.getAllData' },
      { text: '我的', action: '$api.getData' },
    ], // api: { text: '场次规划列表', action: '$api.getData' }  当只有一个值的时候
  },
  // 除了操作项以外的每行配置
  columns,
  // 每行的操作项的配置
  actionList: [
    { text: '配置', action: '$api.openSettings' },
    { text: '删除', action: '$api.deleteRow' },
  ],
  buttonMenu: [
    { text: '添加', action: '$api.addRow' }
  ]

  ...
  // 在此层可使用所有antd文档支持的props
};

const Demo = () => {
  return (
    <TableRender
      schema={schema}
      api={api} // 所有的使用到的操作函数和请求函数，只要挂在api下
      widgets={{ link: text => <a>{text}</a> }} // 有默认的，也可以在此自定义扩展
    />
  );
};

export default Demo;

目前支持的type有：tags，link