table表单如何一条数据分上下两层_前端: 如何让你的Table组件无限可能

在管理后台中我们会使用大量的表格表单组件, 导入导出各种报表, 有些场景还需要对报表数据进行可视化分析, 动态生成可视化图表, 笔者将基于以上场景, 总结一些实用的 Table 组件开发技巧, 让前端开发不再吃力.

往期经典

• 轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报
• 基于自然流布局的可视化拖拽搭建平台设计方案
• 基于React+Koa实现一个h5页面可视化编辑器－H5-Dooring

效果演示

技术点

• 实现 Table 动态渲染
• Table 排序, 多列排序, 自定义搜索
• 批量导入 Excel 数据渲染 Table
• 将 Table 数据导出为 Excel 文件
• 基于 Table 数据自动生成多维度可视化报表
• 实现简单的 Table 编辑器

以上是几个常用的业务分场景, 接下来笔者带大家一一实现.

技术实现

1. 实现 Table 动态渲染

一般我们渲染表格, 大多数是预先将表格结构写好, 比先定义好columns再向后端请求数据填充表格, 如下:

const columns = [
  {
    
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];
const dataSource = [
  {
    
    key: '1',
    name: '徐小夕',
    age: 18,
    address: '杭州夕湖区',
  }
];

<Table dataSource={dataSource} columns={columns} />

这种业务场景虽然可以满足大部分后台管理系统的Table需求, 也可以使用 antd 或者 element 构建, 但是对于 lowcode 系统而言, 很多模块都是不确定的, 我们需要根据协议和数据来驱动 Table 的渲染.

比如我们在 H5-Dooring 中配置了一个表单, 我们要统计分析表单的数据, 由于表单项是不确定的, 所以我们无法提前定义好一个 table schema.

那如何来动态渲染这个 Table 呢? 这里给大家提供一个思路, 基于数据驱动 + 协议层约束. 类似于国外 SAP 的 低代码平台, 完全基于 odata 协议, 我们可以约束表单的提交数据格式, 然后结合用户提交的数据, 动态提取出 Table 所需的 columns, 最后再渲染 Table 组件.

协议层主要约束不同字段的展示类型, 比如字符串, 按钮, 链接, 标签等, 用户在提交表单之后会携带协议层对应的 flag 和用户输入的值, 这有利于我们解析器渲染Table</