feat: #1424

XiaoMi · Dec 15, 2020 · dd96003 · dd96003
1 parent 682f9c4
commit dd96003
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 17 deletions.
diff --git a/components/table/BodyTable.jsx b/components/table/BodyTable.jsx
@@ -1,11 +1,10 @@
-import React, { useState, useContext, useRef, useEffect, useCallback } from 'react'
+import React, { useContext, useRef, useEffect, useCallback } from 'react'
 import Row from './Row'
 import TableContext from './context'
 import _ from 'lodash'
 import { flatTreeData, setDepth } from './util'
 
 const BodyTable = ({ fatherRef, emptyContent }) => {
-  const [expandedTreeRows, setExpandedTreeRows] = useState([])
   const {
     bordered,
     data,
@@ -28,7 +27,9 @@ const BodyTable = ({ fatherRef, emptyContent }) => {
     expandedRender,
     expandedRowKeys,
     rowSelection,
-    localeDatas
+    localeDatas,
+    expandedTreeRows,
+    setExpandedTreeRows
   } = useContext(TableContext)
   // **************** 获取colgroup
   const _columns = _.cloneDeep(columns)

diff --git a/components/table/Cell.jsx b/components/table/Cell.jsx
@@ -41,18 +41,18 @@ const Cell = ({
     >
       {level > 1 && columnIndex === 0 && <Indent times={level - 1} />}
       {columnIndex === 0 &&
-        (rowData.children && rowData.children.length > 0 ? (
+        (allRowData.children && allRowData.children.length > 0 ? (
           <Icon
             style={{ marginRight: 4, cursor: 'pointer' }}
             name={expandedTree ? 'caret-down' : 'caret-right'}
             onClick={() => {
               const _expandedTreeRows = [...expandedTreeRows]
-              if (_expandedTreeRows.includes(rowData.key)) {
-                const idx = _expandedTreeRows.findIndex((row) => row === rowData.key)
+              if (_expandedTreeRows.includes(allRowData.key)) {
+                const idx = _expandedTreeRows.findIndex((row) => row === allRowData.key)
                 _expandedTreeRows.splice(idx, 1)
                 setExpandedTreeRows(_expandedTreeRows)
               } else {
-                _expandedTreeRows.push(rowData.key)
+                _expandedTreeRows.push(allRowData.key)
                 setExpandedTreeRows(_expandedTreeRows)
               }
             }}

diff --git a/components/table/FixedBodyTable.jsx b/components/table/FixedBodyTable.jsx
@@ -1,11 +1,10 @@
-import React, { useState, useContext, useRef } from 'react'
+import React, { useContext, useRef } from 'react'
 import Row from './Row'
 import TableContext from './context'
 import _ from 'lodash'
 import { flatTreeData, setDepth } from './util'
 
 const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
-  const [expandedTreeRows, setExpandedTreeRows] = useState([])
   const {
     data,
     leftFixedData,
@@ -25,7 +24,9 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
     bordered,
     eachRowHeight,
     rowSelection,
-    expandedRender
+    expandedRender,
+    expandedTreeRows,
+    setExpandedTreeRows
   } = useContext(TableContext)
   let _columns
   if (isFixed === 'left') {
@@ -50,7 +51,18 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
   // ***********
   const bodyInner = useRef(null)
 
-  const renderRow = (row, level, index, allRowData) => {
+  let hasTree = false
+  if (data && data.length) {
+    hasTree = data.some((row) => {
+      return row.children && row.children.length
+    })
+  }
+
+  const renderRow = (row, level, index, allRowData, isTree) => {
+    let childrenHasTree = false
+    if (allRowData.children && allRowData.children.length) {
+      childrenHasTree = allRowData.children.some((child) => child.children && child.children.length)
+    }
     return (
       <React.Fragment key={row.key}>
         <Row
@@ -63,11 +75,12 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
           expandedTree={expandedTreeRows.includes(row.key)}
           expandedTreeRows={expandedTreeRows}
           setExpandedTreeRows={setExpandedTreeRows}
+          isTree={isTree}
         />
-        {row.children &&
-          expandedTreeRows.includes(row.key) &&
-          row.children.map((child) => {
-            return renderRow(child, level + 1)
+        {allRowData.children &&
+          expandedTreeRows.includes(allRowData.key) &&
+          allRowData.children.map((child, idx) => {
+            return renderRow(child, level + 1, index, allRowData.children[idx], childrenHasTree || isTree)
           })}
       </React.Fragment>
     )
@@ -173,7 +186,11 @@ const FixedBodyTable = ({ isFixed, rightFixedIndex }) => {
               )
             })}
           </colgroup>
-          <tbody>{_fixedData.map((row, index) => renderRow(row, 1, index, data[index]))}</tbody>
+          <tbody>
+            {_fixedData.map((row, index) => {
+              return renderRow(row, 1, index, data[index], hasTree)
+            })}
+          </tbody>
         </table>
       </div>
     </div>

diff --git a/components/table/Table.jsx b/components/table/Table.jsx
@@ -57,6 +57,7 @@ const Table = ({
   const [eachHeaderHeight, setEachHeaderHeight] = useState(null)
 
   const [realColumnsWidth, setRealColumnsWidth] = useState(columns.map((c) => c.width || 'auto'))
+  const [expandedTreeRows, setExpandedTreeRows] = useState([])
 
   const firstRowRef = useRef(null)
   useEffect(() => {
@@ -226,7 +227,9 @@ const Table = ({
         eachHeaderHeight,
         setEachHeaderHeight,
         theme,
-        localeDatas
+        localeDatas,
+        expandedTreeRows,
+        setExpandedTreeRows
       }}
     >
       <div

diff --git a/docs/demo/table/section-special.jsx b/docs/demo/table/section-special.jsx
@@ -104,6 +104,8 @@ const code = [
     class Demo extends React.Component {
       render() {
         return <Table
+        scrollWidth={1700}
+        fixedToColumn={'a'}
         data={[
           {
             a: 'a-1',