介绍

ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题，所以在其中做了封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。文档地址: ProTable

这里的理念，通过简单的数组，构画符合项目的表单~

跟动态表单一样，我这里做了二次分装，在这里我将 表格的 分页器、搜索框、工具栏做了简单的配置，并结合Mask.From(弹出表框)实现新建、导出、编辑、状态、删除、自定义按钮的功能，别结合正则对表单搜索做了些额外的处理~

并设置全局配置文件，使整个系统的表格更好的管理~

目前他在样式上的功能并不是很完善，后期会将常用的属性提取出来~，有什么好的建议也可以通过评论区留言告诉我~~~

在线预览：动态表格

功能

当你有以下需求时，可以试试本组件:

  • 当你需要为系统所有的表格设定统一的样式，如分页器的页数，大小，搜索框的框占位样式等功能~
  • 当你需要 新建、导出、编辑、状态、删除等功能，结合接口，一键式构画的时候
  • 兼容 ProTable、Mask.From 、From 的所有属性


代码演示

功能演示

基础配置

image.png

操作配置

image.png
image.png
image.png

具体代码

文件位置：src/components/Table

全局配置文件：src/utils/Setting/tableSy

如何使用

  1. import { Table } from '@/components';
  2. import type { tableListProps，formProps } from '@/components'
  3. import { queryTable } from './services'
  5. export default () => {
  6.   const columns: tableListProps[] = [
  7.     {
  8.         title: '表头名称',
  9.       dataIndex: '接口返回的对应字段',
  10.     },
  11.     ...,
  12.     {
  13.         title: '操作',
  14.         dataIndex: 'option',
  15.             type: 'tools',
  16.         tools: [
  17.             {
  18.                 method: 'edit',  //编辑
  19.                 edit: {
  20.                     go: '跳转的页面，如 /list ',
  21.                     payload: '跳转时所带的参数',
  22.                     onBeforeStart: (data：any）=> { // 开始执行的方法，用作表单的
  23.                         const list: formProps[] = [
  24.                   {
  25.                     name: 'test1',
  26.                     default: data.name,
  27.                     label: '姓名'
  28.                   },
  29.                   {
  30.                     name: 'test2',
  31.                     label: '随意字符串'
  32.                   },
  33.                 ]
  34.                 // return '暂未配置' // 返回对应字符串
  35.                 return list // 返回列表
  36.                     },
  37.             onEdit: (values: any, record: any) => {}, // 调用接口的参数
  38.             maskFrom: {
  39.               onRequest: queryTable //请求的接口
  40.             }, 
  41.             ...
  42.             },
  43.         {
  44.           method: 'state',
  45.           state: {} //状态的配置
  46.         },
  47.         {
  48.           method: 'delete',
  49.           delete: {} //删除的配置
  50.         },
  51.         {
  52.           fieldRender: (data:any) => { //自定义配置
  53.             return React.Node
  54.           }
  55.         }
  56.           ]
  57.     }
  58.   ]
  60.   return <Table
  61.          request={(params, sorter, filter) => queryTable({ ...params, sorter, filter })} //列表请求的接口
  62.      tableList={columns} //表单数据
  63.          rowKey='key' // 表单的索引，不能相同，接口返回字段的key
  64.          search={{
  65.          options: [
  66.         {
  67.             method: 'export', //导出
  68.           export：{} // 导出的相关配置
  69.         }       
  70.       ]       
  71.      }}
  72.      toolBar={[
  73.        {
  74.                method: 'creat', //新建
  75.           create：{} //新建的配置，与编辑差不多
  76.        },
  77.        {
  78.           fieldRender: (action:any) => { // 自定义按钮
  79.             return [<Button>测试</Button>]
  80.           }
  81.         }
  82.      ]}
  83.     />
  84. }

特殊说明

  • 表单关于一些常用的配置，这里还没有做，完全兼容于ProTabl，如果有更好的建议，请在评论区留言~~