feat: #1725

CHANGELOG.md

@@ -2,6 +2,7 @@
 # 3.7.0
 - 新增 `Message` 组件 onClick、onClose方法[#1727](https://github.com/XiaoMi/hiui/issues/1727)
 - 新增 `From` 组件 setListItemFieldsValue 方法, 设置表单中From.List的指定项的值[#1760](https://github.com/XiaoMi/hiui/issues/1760)
+- 新增 `Table` 组件 onLoadChildren 方法, 树形表格下异步加载子数据 [#1725](https://github.com/XiaoMi/hiui/issues/1725)
 - 优化 `Grid` 组件接受原生属性 [#1609](https://github.com/XiaoMi/hiui/issues/1609)
 - 优化 `Select` onChang 回调方法中，获取全部选项详细内容 [#1726](https://github.com/XiaoMi/hiui/issues/1726)
 - 优化 `Form` 组件允许 FormItem 中的表单类组件设置 value [#1741](https://github.com/XiaoMi/hiui/issues/1741)

components/table/BodyTable.jsx

@@ -36,7 +36,9 @@ const BodyTable = ({ fatherRef, emptyContent }) => {
     localeDatas,
     expandedTreeRows,
     rowExpandable,
-    setExpandedTreeRows
+    setExpandedTreeRows,
+    onLoadChildren,
+    loadChildren
   } = useContext(TableContext)
   // **************** 获取colgroup
   const _columns = _.cloneDeep(columns)
@@ -102,20 +104,26 @@ const BodyTable = ({ fatherRef, emptyContent }) => {
   let hasTree = false
   if (_data && _data.length) {
     hasTree = _data.some((row) => {
-      return row.children && row.children.length
+      return (row.children && row.children.length) || (onLoadChildren && row.isLeaf)
     })
   }
 
   const renderRow = (row, level, index, rowConfig = {}, isTree) => {
     let childrenHasTree = false
-    if (row.children && row.children.length) {
-      childrenHasTree = row.children.some((child) => child.children && child.children.length)
+    let { children = [], key } = row
+    if (loadChildren.current) {
+      children = loadChildren.current
+    }
+    if (children.length) {
+      childrenHasTree = children.some(
+        (child) => (child.children && child.children.length) || (onLoadChildren && child.isLeaf)
+      )
     }
     return (
-      <React.Fragment key={row.key}>
+      <React.Fragment key={key}>
         <Row
           innerRef={index === 0 ? firstRowRef : null}
-          key={row.key}
+          key={key}
           rowData={row}
           allRowData={row}
           level={level}
@@ -131,9 +139,8 @@ const BodyTable = ({ fatherRef, emptyContent }) => {
           isTree={isTree}
           rowExpandable={rowExpandable}
         />
-        {row.children &&
-          expandedTreeRows.includes(row.key) &&
-          row.children.map((child) => {
+        {expandedTreeRows.includes(key) &&
+          children.map((child) => {
             return renderRow(child, level + 1, index, _, childrenHasTree || isTree)
           })}
       </React.Fragment>

components/table/Cell.jsx

@@ -1,8 +1,9 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import classNames from 'classnames'
 import TableContext from './context'
 import Icon from '../icon'
 import Indent from './Indent'
+import IconLoading from './LoadingIcon'
 
 const Cell = ({
   column,
@@ -18,13 +19,15 @@ const Cell = ({
   rowIndex,
   isTree
 }) => {
-  const { highlightedColKeys, highlightColumns, alignRightColumns, prefix } = useContext(TableContext)
+  const { highlightedColKeys, highlightColumns, alignRightColumns, prefix, onLoadChildren, loadChildren } = useContext(
+    TableContext
+  )
+  const [loading, setLoading] = useState(false)
   // 处理自定义 render 或者合并单元格情况
   const cellContent = column.render
     ? column.render(allRowData[column.dataKey], allRowData, rowIndex)
     : allRowData[column.dataKey]
   const isMergeCell = cellContent && typeof cellContent === 'object' && !cellContent.$$typeof
-
   if (isMergeCell && (cellContent.props.colSpan === 0 || cellContent.props.rowSpan === 0)) {
     return null
   }
@@ -45,13 +48,34 @@ const Cell = ({
       onMouseLeave={(e) => showColHighlight && setHoverColIndex(null)}
     >
       {level > 1 && columnIndex === 0 && <Indent times={level - 1} />}
+      {/* 在异步加载子节点的时候，通过 isLeaf 进行判断 */}
+      {loading && <IconLoading />}
       {columnIndex === 0 &&
-        (allRowData.children && allRowData.children.length > 0 ? (
+        !loading &&
+        ((allRowData.children && allRowData.children.length > 0) || (onLoadChildren && allRowData.isLeaf) ? (
           <Icon
             style={{ marginRight: 4, cursor: 'pointer' }}
             name={expandedTree ? 'caret-down' : 'caret-right'}
-            onClick={() => {
+            onClick={async () => {
+              // 存在即收起，并删除该key
               const _expandedTreeRows = [...expandedTreeRows]
+              if (onLoadChildren) {
+                const data = onLoadChildren(allRowData)
+                if (data.toString() === '[object Promise]') {
+                  setLoading(true)
+                  await data
+                    .then((res) => {
+                      loadChildren.current = res
+                      setLoading(false)
+                    })
+                    .catch(() => {
+                      loadChildren.current = null
+                      setLoading(false)
+                    })
+                } else {
+                  loadChildren.current = data
+                }
+              }
               if (_expandedTreeRows.includes(allRowData.key)) {
                 const idx = _expandedTreeRows.findIndex((row) => row === allRowData.key)
                 _expandedTreeRows.splice(idx, 1)

components/table/FixedBodyTable.jsx

@@ -34,7 +34,9 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
     setExpandedTreeRows,
     rowExpandable,
     flatLeftFixedColumns,
-    flatRightFixedColumns
+    flatRightFixedColumns,
+    onLoadChildren,
+    loadChildren
   } = useContext(TableContext)
   let _columns
   if (isFixed === 'left') {
@@ -62,7 +64,8 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
   let hasTree = false
   if (data && data.length) {
     hasTree = data.some((row) => {
-      return row.children && row.children.length
+      const { children = [] } = row
+      return children.length || (onLoadChildren && row.isLeaf)
     })
   }
 
@@ -92,9 +95,17 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
 
   const renderRow = (row, level, index, allRowData, isTree, rowConfig = {}) => {
     let childrenHasTree = false
+    let { children = [] } = allRowData
+    if (loadChildren.current) {
+      children = loadChildren.current
+    }
+
     if (allRowData.children && allRowData.children.length) {
-      childrenHasTree = allRowData.children.some((child) => child.children && child.children.length)
+      childrenHasTree = allRowData.children.some(
+        (child) => (child.children && child.children.length) || (onLoadChildren && child.isLeaf)
+      )
     }
+
     return (
       <React.Fragment key={row.key}>
         <Row
@@ -115,10 +126,9 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
           isSumRow={rowConfig.isSumRow}
           rowExpandable={rowExpandable}
         />
-        {allRowData.children &&
-          expandedTreeRows.includes(allRowData.key) &&
-          allRowData.children.map((child, idx) => {
-            return renderRow(child, level + 1, index, allRowData.children[idx], childrenHasTree || isTree)
+        {expandedTreeRows.includes(allRowData.key) &&
+          children.map((child, idx) => {
+            return renderRow(child, level + 1, index, children[idx], childrenHasTree || isTree)
           })}
       </React.Fragment>
     )

components/table/Table.jsx

@@ -46,6 +46,7 @@ const Table = ({
   sticky: _ceiling,
   stickyTop = 0,
   setting,
+  onLoadChildren,
   rowExpandable = () => true,
   // *********
   sortCol,
@@ -71,6 +72,7 @@ const Table = ({
   const [eachRowHeight, setEachRowHeight] = useState({})
   const [eachHeaderHeight, setEachHeaderHeight] = useState(null)
   const [hoverColIndex, setHoverColIndex] = useState(null)
+  const loadChildren = useRef(null)
 
   const [realColumnsWidth, setRealColumnsWidth] = useState(columns.map((c) => c.width || 'auto'))
   const [expandedTreeRows, setExpandedTreeRows] = useState([])
@@ -256,7 +258,9 @@ const Table = ({
         theme,
         localeDatas,
         expandedTreeRows,
-        setExpandedTreeRows
+        setExpandedTreeRows,
+        onLoadChildren,
+        loadChildren
       }}
     >
       <div

docs/demo/table/section-special.jsx

@@ -10,6 +10,7 @@ const desc = [
 const rightOptions = [
   '全边框',
   '树形表格',
+  '异步树形表格',
   '内嵌式',
   '内嵌式异步渲染',
   '表头分组',
@@ -153,6 +154,54 @@ const code = [
     }`,
     opt: ['树形表格']
   },
+  {
+    code: `import React from 'react'
+    import Table from '@hi-ui/hiui/es/table'\n
+    class Demo extends React.Component {
+      render() {
+        return <Table
+        scrollWidth={1700}
+        fixedToColumn={'a'}
+        onLoadChildren={(row)=>{
+          console.log(row)
+          return new Promise((resolve, reject)=>{
+            setTimeout(()=>{
+              resolve([
+                {
+                a: 'a-1-1',
+                b: 'b-1-1',
+                c: 'c-1-1',
+                d: 'd-1-1',
+                key: row.key + '1-1'
+              }
+              ])
+            }, 1000)
+          })
+        }}
+        data={[
+          {
+            a: 'a-1',
+            b: 'b-1',
+            c: 'c-1',
+            d: 'd-1',
+            key: 1,
+            isLeaf: true
+          },
+          { a: 'a-2', b: 'b-2', c: 'c-2', d: 'd-2', key: 2, isLeaf: true },
+          { a: 'a-3', b: 'b-3', c: 'c-3', d: 'd-3', key: 3 },
+          { a: 'a-4', b: 'b-4', c: 'c-4', d: 'd-4', key: 4 }
+        ]}
+        columns={[
+          { title: 'A', dataKey: 'a' },
+          { title: 'B', dataKey: 'b' },
+          { title: 'C', dataKey: 'c' },
+          { title: 'D', dataKey: 'd' }
+        ]}
+      />
+      }
+    }`,
+    opt: ['异步树形表格']
+  },
   {
     code: `import React from 'react'
 import Table from '@hi-ui/hiui/es/table'\n

docs/zh-CN/components/table.mdx

@@ -12,7 +12,7 @@
 ## 特别说明
 按照 React 的规范，所有的数组组件必须绑定 key。Table 组件的 data 属性的每一列也需要指定一个 key 值来表明每一行数据的唯一性。同时基于综合考虑（性能、维护性、功能间的组合性等），当没有 key 传入的时候，组件内部并不会帮您生成 key。当 key 不存在时可能会引起一系列的问题，还请注意。
 
-## 基础用法
+<!-- ## 基础用法
 
 import DemoBase from '../../demo/table/section-base.jsx'
 
@@ -34,7 +34,7 @@ import DemoRow from '../../demo/table/section-row.jsx'
 
 import DemoSize from '../../demo/table/section-size.jsx'
 
-<DemoSize />
+<DemoSize /> -->
 
 ## 特殊表格
 
@@ -58,6 +58,7 @@ import DemoAsync from '../../demo/table/section-async.jsx'
 | sticky             | 是否支持表头吸顶                                                                                        | boolean                                        | true \| false                             | false      |
 | stickyTop          | 表头吸顶距离视口顶部距离                                                                                | number                                         | -                                         | 0          |
 | highlightedColKeys | 高亮列（受控）                                                                                          | string[]                                       | -                                         | []         |
+| onLoadChildren     | 点击异步加载子项                                                                                      | (row: DataItem) => object[] \| Promise  | -                                         | -          |
 | expandedRender     | 表格展开项                                                                                              | (record: dataItem, index: number) => ReactNode \| Promise | -                                         | -          |
 | rowExpandable     | 设置是否允许行展开                                                                                              | (record: dataItem ) => ReactNode \| Boolean | -                                         | true        |
 | onExpand          | 表格展开时的回调函数                                                                                             | (expanded, row: object) => void | -                                         | -          |
@@ -81,6 +82,8 @@ import DemoAsync from '../../demo/table/section-async.jsx'
 | showColHighlight   | 表格某一列`hover`时，该列高亮 |  boolean                                        | true \| false                            | false      |
 | onHeaderRow        | 行标题事件处理函数 |  (item: ColumnItem[], index: number) => object                                        | -                           | -      |
 
+> 在 onLoadChildren 方法中，返回的数据中会根据 `isLeaf` 字符控制左侧展开按钮的显示状态
+
 ### onHeaderRow 使用方法
 ```js
 // demo 见【行操作-标题事件处理】