经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » React » 查看文章
react 高效高质量搭建后台系统 系列 —— 表格的封装
来源：cnblogs　　作者：彭加李　　时间：2023/2/13 8:45:54　　对本文有异议

其他章节请看：

react 高效高质量搭建后台系统 系列

表格

有一种页面在后台系统中比较常见：页面分上下两部分，上部分是 input、select、时间等查询项，下部分是查询项对应的表格数据。包含增删改查，例如点击新建进行新增操作。就像这样：

本篇将对 ant 的表格进行封装。效果如下：

spug 中 Table 封装的分析

入口

我们选择 spug 比较简单的模块（角色管理）进行分析。

进入角色管理模块入口，发现表格区封装到模块当前目录的 Table.js 中：

  1. // spug\src\pages\system\role\index.js
  2. import ComTable from './Table';
  4. export default observer(function () {
  5.   return (
  6.     <AuthDiv auth="system.role.view">
  7.       <Breadcrumb>
  8.         <Breadcrumb.Item>首页</Breadcrumb.Item>
  9.         <Breadcrumb.Item>系统管理</Breadcrumb.Item>
  10.         <Breadcrumb.Item>角色管理</Breadcrumb.Item>
  11.       </Breadcrumb>
  12.       {/* 查询区域 */}
  13.       <SearchForm>
  14.         <SearchForm.Item span={8} title="角色名称">
  15.           <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
  16.         </SearchForm.Item>
  17.       </SearchForm>
  18.       {/* 将表格区域封装到了 Table.js 中 */}
  19.       <ComTable/>
  20.      
  21.     </AuthDiv>
  22.   );
  23. })

查阅 Table.js 发现表格使用的是 components 中的 TableCard。

  1. // spug\src\pages\system\role\Table.js
  3. import { TableCard, ... } from 'components';
  5. @observer
  6. class ComTable extends React.Component {
  7.   ...
  9.   render() {
  10.     return (
  11.       <TableCard
  12.         rowKey="id"
  13.         title="角色列表"
  14.         loading={store.isFetching}
  15.         dataSource={store.dataSource}
  16.         onReload={store.fetchRecords}
  17.         actions={[
  18.           <AuthButton type="primary" icon={<PlusOutlined/>} onClick={() => store.showForm()}>新建</AuthButton>
  19.         ]}
  20.         pagination={{
  21.           showSizeChanger: true,
  22.           showLessItems: true,
  23.           showTotal: total => `共 ${total} 条`,
  24.           pageSizeOptions: ['10', '20', '50', '100']
  25.         }}
  26.         columns={this.columns}/>
  27.     )
  28.   }
  29. }
  31. export default ComTable

进一步跟进不难发现 TableCard.js 就是 spug 中 封装好的 Table 组件。

Tip: vscode 搜索 TableCard, 发现有 17 处，推测至少有 16 个模块使用的这个封装好的 Table 组件

表格封装的组件

下面我们来分析spug 中表格分装组件：TableCard。

TableCard 从界面上分三部分：头部、表格主体（包含分页器）、Footer。请看代码：

  1. // spug\src\components\TableCard.js
  3.   return (
  4.     <div ref={rootRef} className={styles.tableCard} style={{ ...props.customStyles }}>
  5.       {/* 头部。例如表格标题 */}
  6.       <Header
  7.         title={props.title}
  8.         columns={columns}
  9.         actions={props.actions}
  10.         fields={fields}
  11.         rootRef={rootRef}
  12.         defaultFields={defaultFields}
  13.         onFieldsChange={handleFieldsChange}
  14.         onReload={props.onReload} />
  15.       {/* 表格主体，包含分页。如果没数据分页器页不会显示 */}
  16.       <Table
  17.         tableLayout={props.tableLayout}
  18.         scroll={props.scroll}
  19.         rowKey={props.rowKey}
  20.         loading={props.loading}
  21.         columns={columns.filter((_, index) => fields.includes(index))}
  22.         dataSource={props.dataSource}
  23.         rowSelection={props.rowSelection}
  24.         expandable={props.expandable}
  25.         size={props.size}
  26.         onChange={props.onChange}
  27.         // 分页器
  28.         pagination={props.pagination} />
  29.       {/* Footer 根据props.selected 来显示，里面显示`选择了几项...` */}
  30.       {selected.length ? <Footer selected={selected} actions={batchActions} /> : null}
  31.     </div>
  32.   )

头部

头部分三部分，左侧是表格的标题，中间是是一些操作，例如新增、批量删除等，右侧是表格的操作。如下图所示：

右侧表格操作也有三部分：刷新表格、列展示、表格全屏。

Tip：表格刷新很简单，就是调用父组件的 reload 重新发请求。

全屏

表格全屏也很简单，利用的是浏览器原生支持的功能。

  1.   // 全屏操作。使用浏览器自带全屏功能
  2.   function handleFullscreen() {
  3.     // props.rootRef.current 是表格组件的原始 Element
  4.     // fullscreenEnabled 属性提供了启用全屏模式的可能性。当它的值是 false 的时候，表示全屏模式不可用（可能的原因有 "fullscreen" 特性不被允许，或全屏模式不被支持等）。
  5.     if (props.rootRef.current && document.fullscreenEnabled) {
  6.       // 如果处在全屏。
  7.       // fullscreenElement 返回当前文档中正在以全屏模式显示的Element节点，如果没有使用全屏模式，则返回null.
  8.       if (document.fullscreenElement) {
  9.         document.exitFullscreen()
  10.       } else {
  11.         props.rootRef.current.requestFullscreen()
  12.       }
  13.     }
  14.   }

列展示

比如取消描述信息，表格中将不会显示该列。效果如下图所示：

这个过程不会发送请求。

整个逻辑如下：

  • 父组件会给 <Header> 组件传入 columns、fields、onFieldsChange、defaultFields等属性方法。
  1. <Header
  2.         title={props.title}
  3.         columns={columns}
  4.         actions={props.actions}
  5.         fields={fields}
  6.         rootRef={rootRef}
  7.         defaultFields={defaultFields}
  8.         onFieldsChange={handleFieldsChange}
  9.         onReload={props.onReload} />
  • 绿框的 checkbox 由传入的 columns 决定
  • 列展示由传入的 columns 和 fields 决定，当选中的个数（fields）等于 columns 的个数，则全选
  • 重置主要针对 fields，页面一进来就会取到默认选中字段。

表格主体

表格主体就是调用 antd 中的 Table 组件：

注： antd 中的 Table 有许多属性，这里只对外暴露有限个 antd 表格属性，这种做法不是很好。

  1. <Table
  2.         // 表格元素的 table-layout 属性，例如可以实现`固定表头/列`
  3.         tableLayout={props.tableLayout}
  4.         // 表格是否可滚动
  5.         scroll={props.scroll}
  6.         // 表格行 key 的取值，可以是字符串或一个函数。spug 中 `rowKey="id"` 重现出现在 29 个文件中。
  7.         rowKey={props.rowKey}
  8.         // 加载中的 loading 效果
  9.         loading={props.loading}
  10.         // 表格的列。用户可以选择哪些列不显示
  11.         columns={columns.filter((_, index) => fields.includes(index))}
  12.         // 数据源
  13.         dataSource={props.dataSource}
  14.         // 表格行是否可选择，配置项（object）。可以不传
  15.         rowSelection={props.rowSelection}
  16.         // 展开功能的配置。可以不传
  17.         expandable={props.expandable}
  18.         // 表格大小 default | middle | small
  19.         size={props.size}
  20.         // 分页、排序、筛选变化时触发
  21.         onChange={props.onChange}
  22.         // 分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页
  23.         pagination={props.pagination} />

尾部

根据父组件的 selected 决定是否显示 Footer：

  1. {/* selected 来自 props，在 Footer 组件中显示选中了多少项等信息，spug 中没有使用到 */}
  2. {selected.length ? <Footer selected={selected} actions={batchActions} /> : null}

Footer 主要显示已选择...，spug 中出现得很少：

  1. function Footer(props) {
  2.   const actions = props.actions || [];
  3.   const length = props.selected.length;
  4.   return length > 0 ? (
  5.     <div className={styles.tableFooter}>
  6.       <div className={styles.left}>已选择 <span>{length}</span> 项</div>
  7.       <Space size="middle">
  8.         {actions.map((item, index) => (
  9.           <React.Fragment key={index}>{item}</React.Fragment>
  10.         ))}
  11.       </Space>
  12.     </div>
  13.   ) : null
  14. }

TableCard.js

spug 中表格封装的完整代码如下：

  1. // spug\src\components\TableCard.js
  2. import React, { useState, useEffect, useRef } from 'react';
  3. import { Table, Space, Divider, Popover, Checkbox, Button, Input, Select } from 'antd';
  4. import { ReloadOutlined, SettingOutlined, FullscreenOutlined, SearchOutlined } from '@ant-design/icons';
  5. import styles from './index.module.less';
  6. // 从缓存中取得之前设置的列。记录要隐藏的字段。比如之前将 `状态` 这列隐藏
  7. let TableFields = localStorage.getItem('TableFields')
  9. TableFields = TableFields ? JSON.parse(TableFields) : {}
  11. function Search(props) {
  12.   // ...
  13. }
  15. // 已选择多少项。
  16. function Footer(props) {
  17.   const actions = props.actions || [];
  18.   const length = props.selected.length;
  19.   return length > 0 ? (
  20.     <div className={styles.tableFooter}>
  21.       <div className={styles.left}>已选择 <span>{length}</span> 项</div>
  22.       <Space size="middle">
  23.         {actions.map((item, index) => (
  24.           <React.Fragment key={index}>{item}</React.Fragment>
  25.         ))}
  26.       </Space>
  27.     </div>
  28.   ) : null
  29. }
  31. function Header(props) {
  32.   // 表格所有的列
  33.   const columns = props.columns || [];
  34.   // 例如创建、批量删除等操作
  35.   const actions = props.actions || [];
  36.   // 选中列，也就是表格要显示的列
  37.   const fields = props.fields || [];
  38.   // 取消或选中某列时触发
  39.   const onFieldsChange = props.onFieldsChange;
  41.   // 列展示组件
  42.   const Fields = () => {
  43.     return (
  44.       // value - 指定选中的选项 string[]
  45.       // onChange- 变化时的回调函数 function(checkedValue)。
  46.       // 例如取消`状态`这列的选中
  47.       <Checkbox.Group value={fields} onChange={onFieldsChange}>
  48.         {/* 展示所有的列 */}
  49.         {columns.map((item, index) => (
  50.           // 注：值的选中是根据索引来的，因为 columns 是数组，是有顺序的。
  51.           <Checkbox value={index} key={index}>{item.title}</Checkbox>
  52.         ))}
  53.       </Checkbox.Group>
  54.     )
  55.   }
  57.   // 列展示 - 全选或取消全部
  58.   function handleCheckAll(e) {
  59.     if (e.target.checked) {
  60.       // 例如：[0, 1, 2, 3]
  61.       // console.log('columns', columns.map((_, index) => index))
  62.       onFieldsChange(columns.map((_, index) => index))
  63.     } else {
  64.       onFieldsChange([])
  65.     }
  66.   }
  68.   // 全屏操作。使用浏览器自带全屏功能
  69.   function handleFullscreen() {
  70.     // props.rootRef.current 是表格组件的原始 Element
  71.     // fullscreenEnabled 属性提供了启用全屏模式的可能性。当它的值是 false 的时候，表示全屏模式不可用（可能的原因有 "fullscreen" 特性不被允许，或全屏模式不被支持等）。
  72.     if (props.rootRef.current && document.fullscreenEnabled) {
  73.       // 如果处在全屏。
  74.       // fullscreenElement 返回当前文档中正在以全屏模式显示的Element节点，如果没有使用全屏模式，则返回null.
  75.       if (document.fullscreenElement) {
  76.         // console.log('退出全屏')
  77.         document.exitFullscreen()
  78.       } else {
  79.         // console.log('全屏该元素')
  80.         props.rootRef.current.requestFullscreen()
  81.       }
  82.     }
  83.   }
  85.   // 头部分左右两部分：表格标题 和 options。options 又分两部分：操作项（例如新建、批量删除）、表格操作（刷新表格、表格列显隐控制、表格全屏控制）
  86.   return (
  87.     <div className={styles.toolbar}>
  88.       <div className={styles.title}>{props.title}</div>
  89.       <div className={styles.option}>
  90.         {/* 新建、删除等项 */}
  91.         <Space size="middle" style={{ marginRight: 10 }}>
  92.           {actions.map((item, index) => (
  93.             // 这种用法有意思
  94.             <React.Fragment key={index}>{item}</React.Fragment>
  95.           ))}
  96.         </Space>
  97.         {/* 如果有新建等按钮就得加一个分隔符 | */}
  98.         {actions.length ? <Divider type="vertical" /> : null}
  99.         {/* 表格操作：刷新表格、表格列显隐控制、表格全屏控制 */}
  100.         <Space className={styles.icons}>
  101.           {/* 刷新表格 */}
  102.           <ReloadOutlined onClick={props.onReload} />
  103.           {/* 控制表格列的显示，比如让`状态`这列隐藏 */}
  104.           <Popover
  105.             arrowPointAtCenter
  106.             destroyTooltipOnHide={{ keepParent: false }}
  107.             // 头部：列展示、重置
  108.             title={[
  109.               <Checkbox
  110.                 key="1"
  111.                 // 全选状态。选中的列数 === 表格中定义的列数
  112.                 checked={fields.length === columns.length}
  113.                 // 在实现全选效果时，你可能会用到 indeterminate 属性。
  114.                 // 设置 indeterminate 状态，只负责样式控制
  115.                 indeterminate={![0, columns.length].includes(fields.length)}
  116.                 onChange={handleCheckAll}>列展示</Checkbox>,
  117.               // 重置展示最初的列，也就是页面刚进来时列展示的状态。localStorage 会记录对表格列展示的状态。
  118.               <Button
  119.                 key="2"
  120.                 type="link"
  121.                 style={{ padding: 0 }}
  122.                 onClick={() => onFieldsChange(props.defaultFields)}>重置</Button>
  123.             ]}
  124.             overlayClassName={styles.tableFields}
  125.             // 触发方式是 click
  126.             trigger="click"
  127.             placement="bottomRight"
  128.             // 卡片内容
  129.             content={<Fields />}>
  130.             <SettingOutlined />
  131.           </Popover>
  132.           {/* 表格全屏控制 */}
  133.           <FullscreenOutlined onClick={handleFullscreen} />
  134.         </Space>
  135.       </div>
  136.     </div>
  137.   )
  138. }
  140. function TableCard(props) {
  141.   // 定义一个 ref，用于表格的全屏控制
  142.   const rootRef = useRef();
  143.   // Footer 组件中使用
  144.   const batchActions = props.batchActions || [];
  145.   // Footer 组件中使用
  146.   const selected = props.selected || [];
  147.   // 记录要展示的列
  148.   // 例如全选则是 [0, 1, 2, 3 ...]，空数组表示不展示任何列
  149.   const [fields, setFields] = useState([]);
  150.   // 用于列展示中的重置功能。页面一进来就会将选中的列进行保存
  151.   const [defaultFields, setDefaultFields] = useState([]);
  152.   // 用于保存传入的表格的列数据
  153.   const [columns, setColumns] = useState([]);
  155.   useEffect(() => {
  156.     // _columns - 传入的列数据 
  157.     let [_columns, _fields] = [props.columns, []];
  158.     // `角色名称`这种功能 props.children 是空。
  159.     if (props.children) {
  160.       if (Array.isArray(props.children)) {
  161.         _columns = props.children.filter(x => x.props).map(x => x.props)
  162.       } else {
  163.         _columns = [props.children.props]
  164.       }
  165.     }
  166.     // 隐藏字段。有 hide 属性的是要隐藏的字段。如果有 tKey 字段，隐藏字段则以缓存的为准
  167.     let hideFields = _columns.filter(x => x.hide).map(x => x.title)
  168.     // tKey 是表格标识，比如这个表要隐藏 `状态` 字段，另一个表格要隐藏 `地址` 字段，与表格初始列展示对应。
  169.     // 如果表格有唯一标识（tKey），再看TableFields（来自localStorage）中是否有数据，如果没有则更新缓存
  170.     if (props.tKey) {
  171.       if (TableFields[props.tKey]) {
  172.         hideFields = TableFields[props.tKey]
  173.       } else {
  174.         TableFields[props.tKey] = hideFields
  175.         localStorage.setItem('TableFields', JSON.stringify(TableFields))
  176.       }
  177.     }
  179.     // Array.prototype.entries() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键/值对。
  180.     for (let [index, item] of _columns.entries()) {
  181.       // 比如之前将 `状态` 这列隐藏，输出：hideFields ['状态']
  182.       // console.log('hideFields', hideFields)
  183.       if (!hideFields.includes(item.title)) _fields.push(index)
  184.     }
  185.     // 
  186.     setFields(_fields);
  187.     // 将传入的列数据保存在 state 中
  188.     setColumns(_columns);
  190.     // 记录初始展示的列
  191.     setDefaultFields(_fields);
  192.     // eslint-disable-next-line react-hooks/exhaustive-deps
  193.   }, [])
  195.   // 列展示的操作。
  196.   function handleFieldsChange(fields) {
  197.     // 更新选中的 fields
  198.     setFields(fields)
  199.     // tKey 就是一个标识，可以将未选中的fields存入 localStorage。比如用户取消了 `状态` 这列的展示，只要没有清空缓存，下次查看表格中仍旧不会显示`状态`这列
  200.     // 将列展示状态保存到缓存
  201.     if (props.tKey) {
  202.       TableFields[props.tKey] = columns.filter((_, index) => !fields.includes(index)).map(x => x.title)
  203.       localStorage.setItem('TableFields', JSON.stringify(TableFields))
  204.       // 隐藏三列（"频率","描述","操作"），输入： {"hi":["备注信息"],"cb":[],"cg":[],"cc":[],"sa":[],"mi":["频率","描述","操作"]}
  205.       // console.log(localStorage.getItem('TableFields'))
  206.     }
  207.   }
  209.   // 分为三部分：Header、Table和 Footer。
  210.   return (
  211.     <div ref={rootRef} className={styles.tableCard}>
  212.       {/* 头部。 */}
  213.       <Header
  214.         // 表格标题。例如`角色列表`
  215.         title={props.title}
  216.         // 表格的列
  217.         columns={columns}
  218.         // 操作。例如新增、批量删除等操作
  219.         actions={props.actions}
  220.         // 不隐藏的列
  221.         fields={fields}
  222.         rootRef={rootRef}
  223.         defaultFields={defaultFields}
  224.         // 所选列变化时触发
  225.         onFieldsChange={handleFieldsChange}
  226.         onReload={props.onReload} />
  227.       {/* antd 的 Table 组件 */}
  228.       <Table
  229.         // 表格元素的 table-layout 属性，例如可以实现`固定表头/列`
  230.         tableLayout={props.tableLayout}
  231.         // 表格是否可滚动
  232.         scroll={props.scroll}
  233.         // 表格行 key 的取值，可以是字符串或一个函数。spug 中 `rowKey="id"` 重现出现在 29 个文件中。
  234.         rowKey={props.rowKey}
  235.         // 加载中的 loading 效果
  236.         loading={props.loading}
  237.         // 表格的列。用户可以选择哪些列不显示
  238.         columns={columns.filter((_, index) => fields.includes(index))}
  239.         // 数据源
  240.         dataSource={props.dataSource}
  241.         // 表格行是否可选择，配置项（object）。可以不传
  242.         rowSelection={props.rowSelection}
  243.         // 展开功能的配置。可以不传
  244.         expandable={props.expandable}
  245.         // 表格大小 default | middle | small
  246.         size={props.size}
  247.       // 分页、排序、筛选变化时触发
  248.         onChange={props.onChange}
  249.         // 分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页
  250.         pagination={props.pagination} />
  251.       {/* selected 来自 props，在 Footer 组件中显示选中了多少项等信息，spug 中没有使用到 */}
  252.       {selected.length ? <Footer selected={selected} actions={batchActions} /> : null}
  253.     </div>
  254.   )
  255. }
  257. // spug 没有用到
  258. TableCard.Search = Search;
  259. export default TableCard

myspug 中 Table 封装的实现

配置 mobx

笔者这里验证效果时需要使用状态管理器 mobx，目前项目会报如下 2 种错误：

  1. Support for the experimental syntax 'decorators' isn't currently enabled (10:1):
  1. src\pages\system\role\Table.js
  2.   Line 10:  Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". (10:0)

这里需要两处修改即可：

  • config-overrides.js 中增加 addDecoratorsLegacy 的支持
  • 项目根目录新建 .babelrc 文件

Tip: 具体细节请看 这里。

至此 mobx 仍有问题，经过一番折腾，最终才验证表格成功。

笔者在表格中使用一个变量（store.isFetching）控制 loading 效果，但页面一直显示加载效果。而加载完毕将 isFetching 置为 false 的语句也执行了，怀疑是 store.isFetching 变量没有同步到组件。折腾了一番...，最后将 mobx和 mobx-react 包版本改成和 spug 中相同：

  1. -    "mobx": "^6.7.0",
  2. -    "mobx-react": "^7.6.0",
  3. +    "mobx": "^5.15.7",
  4. +    "mobx-react": "^6.3.1",

期间无意发现我的组件加载完毕后输出两次

  1. componentDidMount(){
  2.   // 执行2次
  3.   console.log('hi')
  4. }

删除 <React.StrictMode>。

效果

笔者在新建页面（角色管理）中验证封装的表格组件，效果如下：

代码

有关导航的配置，路由、mock数据、样式都无需讲解，这里主要说一下表格模块的封装（TableCard.js）和表格的使用（store.js、Table.js）。

TableCard.js

前面我们已经分析过了 spug 中表格的封装，这里与之类似，不在冗余。

  1. // myspug\src\components\TableCard.js
  3.  import React, { useState, useEffect, useRef } from 'react';
  4.  import { Table, Space, Divider, Popover, Checkbox, Button, Input, Select } from 'antd';
  5.  import { ReloadOutlined, SettingOutlined, FullscreenOutlined, SearchOutlined } from '@ant-design/icons';
  6.  import styles from './index.module.less';
  7.  // 从缓存中取得之前设置的列。记录要隐藏的字段。比如之前将 `状态` 这列隐藏
  8.  let TableFields = localStorage.getItem('TableFields')
  9.  
  10.  TableFields = TableFields ? JSON.parse(TableFields) : {}
  11.  
  12.  // 已选择多少项。
  13.  function Footer(props) {
  14.    const actions = props.actions || [];
  15.    const length = props.selected.length;
  16.    return length > 0 ? (
  17.      <div className={styles.tableFooter}>
  18.        <div className={styles.left}>已选择 <span>{length}</span> 项</div>
  19.        <Space size="middle">
  20.          {actions.map((item, index) => (
  21.            <React.Fragment key={index}>{item}</React.Fragment>
  22.          ))}
  23.        </Space>
  24.      </div>
  25.    ) : null
  26.  }
  27.  
  28.  function Header(props) {
  29.    const columns = props.columns || [];
  30.    const actions = props.actions || [];
  31.    // 选中列，也就是表格要显示的列
  32.    const fields = props.fields || [];
  33.    const onFieldsChange = props.onFieldsChange;
  34.  
  35.    // 列展示组件
  36.    const Fields = () => {
  37.      return (
  38.        // value - 指定选中的选项 string[]
  39.        // onChange- 变化时的回调函数 function(checkedValue)。
  40.        // 例如取消`状态`这列的选中
  41.        <Checkbox.Group value={fields} onChange={onFieldsChange}>
  42.          {/* 展示所有的列 */}
  43.          {columns.map((item, index) => (
  44.            // 注：值的选中是根据索引来的，因为 columns 是数组，是有顺序的。
  45.            <Checkbox value={index} key={index}>{item.title}</Checkbox>
  46.          ))}
  47.        </Checkbox.Group>
  48.      )
  49.    }
  50.  
  51.    // 列展示 - 全选或取消全部
  52.    function handleCheckAll(e) {
  53.      if (e.target.checked) {
  54.        // 例如：[0, 1, 2, 3]
  55.        // console.log('columns', columns.map((_, index) => index))
  56.        onFieldsChange(columns.map((_, index) => index))
  57.      } else {
  58.        onFieldsChange([])
  59.      }
  60.    }
  61.  
  62.    // 全屏操作。使用浏览器自带全屏功能
  63.    function handleFullscreen() {
  64.      // props.rootRef.current 是表格组件的原始 Element
  65.      // fullscreenEnabled 属性提供了启用全屏模式的可能性。当它的值是 false 的时候，表示全屏模式不可用（可能的原因有 "fullscreen" 特性不被允许，或全屏模式不被支持等）。
  66.      if (props.rootRef.current && document.fullscreenEnabled) {
  67.        // 如果处在全屏。
  68.        // fullscreenElement 返回当前文档中正在以全屏模式显示的Element节点，如果没有使用全屏模式，则返回null.
  69.        if (document.fullscreenElement) {
  70.          // console.log('退出全屏')
  71.          document.exitFullscreen()
  72.        } else {
  73.          // console.log('全屏该元素')
  74.          props.rootRef.current.requestFullscreen()
  75.        }
  76.      }
  77.    }
  78.  
  79.    // 头部分左右两部分：表格标题 和 options。options 又分两部分：操作项（例如新建、批量删除）、表格操作（刷新表格、表格列显隐控制、表格全屏控制）
  80.    return (
  81.      <div className={styles.toolbar}>
  82.        <div className={styles.title}>{props.title}</div>
  83.        <div className={styles.option}>
  84.          {/* 新建、删除等项 */}
  85.          <Space size="middle" style={{ marginRight: 10 }}>
  86.            {actions.map((item, index) => (
  87.              // 这种用法有意思
  88.              <React.Fragment key={index}>{item}</React.Fragment>
  89.            ))}
  90.          </Space>
  91.          {/* 如果有新建等按钮就得加一个分隔符 | */}
  92.          {actions.length ? <Divider type="vertical" /> : null}
  93.          {/* 表格操作：刷新表格、表格列显隐控制、表格全屏控制 */}
  94.          <Space className={styles.icons}>
  95.            {/* 刷新表格 */}
  96.            <ReloadOutlined onClick={props.onReload} />
  97.            {/* 控制表格列的显示，比如让`状态`这列隐藏 */}
  98.            <Popover
  99.              arrowPointAtCenter
  100.              destroyTooltipOnHide={{ keepParent: false }}
  101.              // 头部：列展示、重置
  102.              title={[
  103.                <Checkbox
  104.                  key="1"
  105.                  // 全选状态。选中的列数 === 表格中定义的列数
  106.                  checked={fields.length === columns.length}
  107.                  // 在实现全选效果时，你可能会用到 indeterminate 属性。
  108.                  // 设置 indeterminate 状态，只负责样式控制
  109.                  indeterminate={![0, columns.length].includes(fields.length)}
  110.                  onChange={handleCheckAll}>列展示</Checkbox>,
  111.                // 重置展示最初的列，也就是页面刚进来时列展示的状态。localStorage 会记录对表格列展示的状态。
  112.                <Button
  113.                  key="2"
  114.                  type="link"
  115.                  style={{ padding: 0 }}
  116.                  onClick={() => onFieldsChange(props.defaultFields)}>重置</Button>
  117.              ]}
  118.              overlayClassName={styles.tableFields}
  119.              // 触发方式是 click
  120.              trigger="click"
  121.              placement="bottomRight"
  122.              // 卡片内容
  123.              content={<Fields />}>
  124.              <SettingOutlined />
  125.            </Popover>
  126.            {/* 表格全屏控制 */}
  127.            <FullscreenOutlined onClick={handleFullscreen} />
  128.          </Space>
  129.        </div>
  130.      </div>
  131.    )
  132.  }
  133.  
  134.  function TableCard(props) {
  135.    // 定义一个 ref，用于表格的全屏控制
  136.    const rootRef = useRef();
  137.    // Footer 组件中使用
  138.    const batchActions = props.batchActions || [];
  139.    // Footer 组件中使用
  140.    const selected = props.selected || [];
  141.    // 记录要展示的列
  142.    // 例如全选则是 [0, 1, 2, 3 ...]，空数组表示不展示任何列
  143.    const [fields, setFields] = useState([]);
  144.    const [defaultFields, setDefaultFields] = useState([]);
  145.    // 用于保存传入的表格的列数据
  146.    const [columns, setColumns] = useState([]);
  147.  
  148.    useEffect(() => {
  149.      // _columns - 传入的列数据 
  150.      let [_columns, _fields] = [props.columns, []];
  151.      if (props.children) {
  152.        if (Array.isArray(props.children)) {
  153.          _columns = props.children.filter(x => x.props).map(x => x.props)
  154.        } else {
  155.          _columns = [props.children.props]
  156.        }
  157.      }
  158.      // 隐藏字段。有 hide 属性的是要隐藏的字段。如果有 tKey 字段，隐藏字段则以缓存的为准
  159.      let hideFields = _columns.filter(x => x.hide).map(x => x.title)
  160.      // tKey 是表格标识，比如这个表要隐藏 `状态` 字段，另一个表格要隐藏 `地址` 字段，与表格初始列展示对应。
  161.      // 如果表格有唯一标识（tKey），再看TableFields（来自localStorage）中是否有数据，如果没有则更新缓存
  162.      if (props.tKey) {
  163.        if (TableFields[props.tKey]) {
  164.          hideFields = TableFields[props.tKey]
  165.        } else {
  166.          TableFields[props.tKey] = hideFields
  167.          localStorage.setItem('TableFields', JSON.stringify(TableFields))
  168.        }
  169.      }
  170.  
  171.      // Array.prototype.entries() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键/值对。
  172.      for (let [index, item] of _columns.entries()) {
  173.        // 比如之前将 `状态` 这列隐藏，输出：hideFields ['状态']
  174.        // console.log('hideFields', hideFields)
  175.        if (!hideFields.includes(item.title)) _fields.push(index)
  176.      }
  177.      // 
  178.      setFields(_fields);
  179.      // 将传入的列数据保存在 state 中
  180.      setColumns(_columns);
  181.  
  182.      // 记录初始展示的列
  183.      setDefaultFields(_fields);
  184.      // eslint-disable-next-line react-hooks/exhaustive-deps
  185.    }, [])
  186.  
  187.    // 列展示的操作。
  188.    function handleFieldsChange(fields) {
  189.      // 更新选中的 fields
  190.      setFields(fields)
  191.      // tKey 就是一个标识，可以将未选中的fields存入 localStorage。比如用户取消了 `状态` 这列的展示，只要没有清空缓存，下次查看表格中仍旧不会显示`状态`这列
  192.      // 将列展示状态保存到缓存
  193.      if (props.tKey) {
  194.        TableFields[props.tKey] = columns.filter((_, index) => !fields.includes(index)).map(x => x.title)
  195.        localStorage.setItem('TableFields', JSON.stringify(TableFields))
  196.        // 隐藏三列（"频率","描述","操作"），输入： {"hi":["备注信息"],"cb":[],"cg":[],"cc":[],"sa":[],"mi":["频率","描述","操作"]}
  197.        // console.log(localStorage.getItem('TableFields'))
  198.      }
  199.    }
  200.  
  201.    // 分为三部分：Header、Table和 Footer。
  202.    return (
  203.      <div ref={rootRef} className={styles.tableCard}>
  204.        {/* 头部。 */}
  205.        <Header
  206.          // 表格标题。例如`角色列表`
  207.          title={props.title}
  208.          // 表格的列
  209.          columns={columns}
  210.          // 操作。例如新增、批量删除等操作
  211.          actions={props.actions}
  212.          // 不隐藏的列
  213.          fields={fields}
  214.          rootRef={rootRef}
  215.          defaultFields={defaultFields}
  216.          // 所选列变化时触发
  217.          onFieldsChange={handleFieldsChange}
  218.          onReload={props.onReload} />
  219.        {/* antd 的 Table 组件 */}
  220.        <Table
  221.          // 表格元素的 table-layout 属性，例如可以实现`固定表头/列`
  222.          tableLayout={props.tableLayout}
  223.          // 表格是否可滚动
  224.          scroll={props.scroll}
  225.          // 表格行 key 的取值，可以是字符串或一个函数。spug 中 `rowKey="id"` 重现出现在 29 个文件中。
  226.          rowKey={props.rowKey}
  227.          // 加载中的 loading 效果
  228.          loading={props.loading}
  229.          // 表格的列。用户可以选择哪些列不显示
  230.          columns={columns.filter((_, index) => fields.includes(index))}
  231.          // 数据源
  232.          dataSource={props.dataSource}
  233.          // 表格行是否可选择，配置项（object）。可以不传
  234.          rowSelection={props.rowSelection}
  235.          // 展开功能的配置。可以不传
  236.          expandable={props.expandable}
  237.          // 表格大小 default | middle | small
  238.          size={props.size}
  239.          // 分页、排序、筛选变化时触发
  240.          onChange={props.onChange}
  241.          // 分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页
  242.          pagination={props.pagination} />
  243.        {/* selected 来自 props，在 Footer 组件中显示选中了多少项等信息，spug 中没有使用到 */}
  244.        {selected.length ? <Footer selected={selected} actions={batchActions} /> : null}
  245.      </div>
  246.    )
  247.  }
  248.  
  249.  // spug 没有用到，我们也删除
  250. //  TableCard.Search = Search;
  251.  export default TableCard
Table.js

这里是表格的使用，与 antd Table 类似，主要是 columns（列） 和 dataSource（数据源）：

  1. // myspug\src\pages\system\role\Table.js
  3. import React from 'react';
  4. import { observer } from 'mobx-react';
  5. import { Modal, Popover, Button, message } from 'antd';
  6. // PlusOutlined：antd 2.2.8 找到 
  7. import { PlusOutlined } from '@ant-design/icons';
  8. import { TableCard, } from '@/components';
  9. import store from './store';
  11. @observer
  12. class ComTable extends React.Component {
  13.   componentDidMount() {
  14.     store.fetchRecords()
  15.   }
  16.   columns = [{
  17.     title: '角色名称',
  18.     dataIndex: 'name',
  19.   }, {
  20.     title: '关联账户',
  21.     render: info => 0
  22.   }, {
  23.     title: '描述信息',
  24.     dataIndex: 'desc',
  25.     ellipsis: true
  26.   }, {
  27.     title: '操作',
  28.     width: 400,
  29.     render: info => (
  30.       '编辑按钮'
  31.     )
  32.   }];
  34.   render() {
  35.     return (
  36.       <TableCard
  37.         rowKey="id"
  38.         title="角色列表"
  39.         loading={store.isFetching}
  40.         dataSource={store.dataSource}
  41.         // 刷新表格
  42.         onReload={store.fetchRecords}
  43.         actions={[
  44.           <Button type="primary" icon={<PlusOutlined />}>新增</Button>
  45.         ]}
  46.         pagination={{
  47.           showSizeChanger: true,
  48.           showLessItems: true,
  49.           showTotal: total => `共 ${total} 条`,
  50.           pageSizeOptions: ['10', '20', '50', '100']
  51.         }}
  52.         columns={this.columns} />
  53.     )
  54.   }
  55. }
  57. export default ComTable
store.js

状态管理。例如表格的数据的请求，控制表格 loading 效果的 isFetching：

  1. // myspug\src\pages\system\role\store.js
  3. import { observable, computed, } from 'mobx';
  4. import http from '@/libs/http';
  6. class Store {
  7.   @observable records = [];
  9.   @observable isFetching = false;
  11.   @computed get dataSource() {
  12.     let records = this.records;
  13.     return records
  14.   }
  16.   fetchRecords = () => {
  17.     // 加载中
  18.     this.isFetching = true;
  19.     http.get('/api/account/role/')
  20.       .then(res => {
  21.         this.records = res
  22.       })
  23.       .finally(() => this.isFetching = false)
  24.   };
  25. }
  27. export default new Store()

分页请求数据

spug 中的表格数据是一次性加载出来的，点击上下翻页不会发请求给后端。配合表格上方的过滤条件，体验不错，因为无需请求，数据都在前端。就像这样：

但是如果数据量很大，按照常规做法，翻页、查询等操作都需要从后端重新请求数据。

要实现表格翻页时重新请求数据也很简单，使用 antd Table 的 onChange 属性（分页、排序、筛选变化时触发）即可。

前面我们已经在 TableCard.js 中增加了该属性（即onChange={props.onChange}）

下面我们将角色管理页面的表格改为分页请求数据：

首先我们回顾下目前这种一次请求表格所有数据，纯前端分页效果。请看代码：

  1.   render() {
  2.     return (
  3.       <TableCard
  4.         rowKey="id"
  5.         title="角色列表"
  6.         loading={store.isFetching}
  7.         // 后端的数据源
  8.         dataSource={store.dataSource}
  9.         onReload={store.fetchRecords}
  10.         actions={[
  11.           <Button type="primary" icon={<PlusOutlined />}>新增</Button>
  12.         ]}
  13.         // 分页器
  14.         pagination={{
  15.           showSizeChanger: true,
  16.           showLessItems: true,
  17.           showTotal: total => `共 ${total} 条`,
  18.           pageSizeOptions: ['10', '20', '50', '100']
  19.         }}
  20.         columns={this.columns} />
  21.     )
  22.   }

只需要给表格传入数据源（dataSource），antd Table 自动完成前端分页效果。

接着我们修改代码如下：

  • Table.js - 给表格增加了 onChange 对应的回调以及给分页器增加 total 属性
  • store.js - 定义新状态 current、total
  1. // myspug\src\pages\system\role\Table.js
  3. ...
  4. import { TableCard, } from '@/components';
  5. import store from './store';
  7. @observer
  8. class ComTable extends React.Component {
  9.   componentDidMount() {
  10.     store.fetchRecords()
  11.   }
  12.   columns = [...];
  14.   handleTableChange = ({current}, filters, sorter) => {
  15.     store.current = current
  16.     store.tableOptions = {
  17.       // 排序：好像只支持单个排序
  18.       sortField: sorter.field,
  19.       sortOrder: sorter.order,
  20.       ...filters
  21.     }
  22.     store.fetchRecords();
  23.   };
  26.   render() {
  27.     return (
  28.       <TableCard
  29.         rowKey="id"
  30.         title="角色列表"
  31.         loading={store.isFetching}
  32.         // 后端的数据源
  33.         dataSource={store.dataSource}
  34.         onReload={store.fetchRecords}
  35.         onChange={this.handleTableChange}
  36.   
  37.         // 分页器
  38.         pagination={{
  39.           showSizeChanger: true,
  40.           showLessItems: true,
  41.           showTotal: total => `共 ${total} 条`,
  42.           pageSizeOptions: ['10', '20', '50', '100'],
  43.           // 如果不传 total，则以后端返回数据条数作为 total 的值
  44.           total: store.total,
  45.           // 如果不传，则默认是第一条，如果需要默认显示第3条，则必须传
  46.           current: store.current,
  47.         }}
  48.         columns={this.columns} />
  49.     )
  50.   }
  51. }
  53. export default ComTable
  1. // myspug\src\pages\system\role\store.js
  3. class Store {
  4.   ...
  6.   // 默认第1页
  7.   @observable current = 1;
  8.   
  9.   // 总共多少页
  10.   @observable total = '';
  12.   // 其他参数，例如排序、过滤等等
  13.   @observable tableOptions = {}
  15.   
  16.   fetchRecords = () => {
  17.     const realParams = {current: this.current, ...this.tableOptions}
  18.     this.isFetching = true;
  19.     http.get('/api/account/role/', {params: realParams})
  20.       .then(res => {
  21.         // 可以这么赋值
  22.         // ({data: this.records, total: this.pagination.total} = res)
  23.         this.total = res.total
  24.         this.records = res.data
  25.       })
  26.       .finally(() => this.isFetching = false)
  27.   }
  28. }
  29. export default new Store()

最终效果如下图所示：

Tip：本地 mock 模拟数据如下

  1. const getNum = () => String(+new Date()).slice(-3)
  2. // 注：第三个参数必须不能是对象，否则 getNum 不会重新执行
  3. Mock.mock(/\/api\/account\/role\/.*/, 'get', function () {
  4.     return {
  5.         "data": {
  6.             data: new Array(10).fill(0).map((item, index) => ({
  7.                 "id": index + getNum(), "name": 'name' + index + getNum(), "desc": null,
  8.             })),
  9.             total: 10000,
  10.         }
  11.         , "error": ""
  12.     }
  13. })

扩展

create-react-app 组件为什么加载两次

试试删除 <React.StrictMode>（官网说：这仅适用于开发模式。生产模式下生命周期不会被调用两次）

疑惑：笔者验证表格时使用了 mobx，表格没渲染出来，删除 <React.StrictMode> 后表格正常，不知是否是 <React.StrictMode> 的副作用。

spug 中表格的不足

  • antd Table 组件某些属性无法使用：spug 中表格是对 antd Table 组件的封装，但是现在封装的组件对外的接口只提供了 antd Table 中有限的几个属性。例如上文提到的翻页请求后端数据需要使用 antd Table 中的 onChange 属性就没有提供出来

  • 头部一定会有：不需要都不行

其他章节请看：

react 高效高质量搭建后台系统 系列

原文链接：https://www.cnblogs.com/pengjiali/p/17111020.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

React热门文章

  • React报错解决之ref返回undefined或null
  • 使用react-beautiful-dnd实现列表间拖拽踩坑
  • 理解 React 中的 useEffect、useMemo 与 useCallback
  • React antd tabs切换造成子组件重复刷新
  • vue3+ts中ref与reactive指定类型实现示例
  • 基于React.js实现简单的文字跑马灯效果
  • 深入解析React DnD拖拽原理，轻松掌握拖放技巧！
  • react实现全局组件确认弹窗
  • React使用高德地图的实现示例(react-amap)
  • react 高效高质量搭建后台系统 系列 —— 表格的封装

    • React推荐文章

  • Antd-React-TreeSelect前端搜索过滤
  • React组件封装：文字、表情评论框
  • Taro：高性能小程序的最佳实践
  • Netty源码学习4——服务端是处理新连接的&netty的reactor模式
  • 关于 React 性能优化和数栈产品中的实践
  • 【Vue3响应式入门#01】Reactivity
  • React跨路由组件动画
  • Vue vs React：你需要知道的一切
  • 为react项目添加开发/提交规范（前端工程化、eslint、prettier、husky、commitlint、stylelint）
  • react18 hooks自定义移动端Popup弹窗组件RcPop

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号