Merge branch 'develop' into feature/#1786

XiaoMi · Jun 18, 2021 · 461ce08 · 461ce08
2 parents 6f7ac71 + c9c9c91
commit 461ce08
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - 新增 `From` 组件 setListItemFieldsValue 方法, 设置表单中From.List的指定项的值[#1760](https://github.com/XiaoMi/hiui/issues/1760)
 - 新增 `Table` 组件 onLoadChildren 方法, 树形表格下异步加载子数据 [#1725](https://github.com/XiaoMi/hiui/issues/1725)
 - 新增 `Badge` 组件 offset 属性设置状态点的位置偏移 [#1786](https://github.com/XiaoMi/hiui/issues/1786)
+- 优化 `Table` 组件树形表格，允许控制指定节点的展开收起 [#1784](https://github.com/XiaoMi/hiui/issues/1784)
 - 优化 `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)
@@ -255,4 +256,4 @@
 ## 1.x
 
 [更新日志汇总](https://github.com/XiaoMi/hiui/blob/stable/1.x/CHANGELOG.md)
-
+
diff --git a/components/form/Item.js b/components/form/Item.js
@@ -73,7 +73,8 @@ const FormItem = (props) => {
 
   useEffect(() => {
     const { eventName, e, args, componentProps } = eventInfo.current || {}
-    const _props = componentProps || children.props
+    const _children = children || {}
+    const _props = componentProps || _children.props
     eventName === 'onChange' && _props.onChange && _props.onChange(e, ...args)
     eventName === 'onBlur' && _props.onBlur && _props.onBlur(e, ...args)
     eventInfo.current = {}

diff --git a/components/table/BodyTable.jsx b/components/table/BodyTable.jsx
@@ -113,7 +113,7 @@ const BodyTable = ({ fatherRef, emptyContent }) => {
       }
     }
     const { children = [] } = row
-    if (children.length) {
+    if (children && children.length) {
       childrenHasTree = children.some(
         (child) => (child.children && child.children.length) || (onLoadChildren && child.isLeaf)
       )
@@ -138,7 +138,8 @@ const BodyTable = ({ fatherRef, emptyContent }) => {
           isTree={isTree}
           rowExpandable={rowExpandable}
         />
-        {expandedTreeRows.includes(key) &&
+        {children &&
+          expandedTreeRows.includes(key) &&
           children.map((child) => {
             return renderRow(child, level + 1, index, _, childrenHasTree || isTree)
           })}

diff --git a/components/table/Table.jsx b/components/table/Table.jsx
@@ -30,7 +30,8 @@ const Table = ({
   data,
   highlightedRowKeys = [],
   highlightedColKeys = [],
-  expandedRowKeys,
+  expandedRowKeys: propsExpandRowKeys,
+  expandRowKeys,
   onExpand,
   onHeaderRow = defaultHeaderRow,
   columns: propsColumns = [],
@@ -58,6 +59,7 @@ const Table = ({
   localeDatas,
   emptyContent = localeDatas.table.emptyContent
 }) => {
+  const expandedRowKeys = propsExpandRowKeys || expandRowKeys
   const [columns, setColumns] = useState(propsColumns)
   const hiTable = useRef(null)
   const disabledData = useRef([])
@@ -139,7 +141,9 @@ const Table = ({
       }
     }
   }, [columns, dataSource, data])
-
+  useEffect(() => {
+    setExpandedTreeRows(propsExpandRowKeys || expandRowKeys || [])
+  }, [propsExpandRowKeys, data, expandRowKeys])
   // 有表头分组那么也要 bordered
   const _bordered = flattedColumns.length > columns.length || bordered
 

diff --git a/docs/demo/table/section-special.jsx b/docs/demo/table/section-special.jsx
@@ -115,6 +115,7 @@ const code = [
     class Demo extends React.Component {
       render() {
         return <Table
+        expandRowKeys={[1]}
         fixedToColumn={'a'}
         data={[
           {
@@ -322,6 +323,7 @@ class Demo extends React.Component {
       rowExpandable={(rowData)=>{
         return rowData.key !== 2
        }}
+       expandRowKeys={[1]}
       expandedRender={(rowData, index) => {
         return (
               <div style={{paddingLeft:50}}>

diff --git a/docs/zh-CN/components/table.mdx b/docs/zh-CN/components/table.mdx
@@ -63,7 +63,7 @@ import DemoAsync from '../../demo/table/section-async.jsx'
 | expandedRender     | 表格展开项                                                                                              | (record: dataItem, index: number) => ReactNode \| Promise | -                                         | -          |
 | rowExpandable     | 设置是否允许行展开                                                                                              | (record: dataItem ) => ReactNode \| Boolean | -                                         | true        |
 | onExpand          | 表格展开时的回调函数                                                                                             | (expanded, row: object) => void | -                                         | -          |
-| expandRowKeys     | 表格展开的行（受控）                                                                                          | number[] | -                                         | -          |
+| expandRowKeys    | 内嵌式表格以及树形表格展开的行                                                                                          | number[] | -                                         | -          |
 | maxHeight          | 表格最大高度，当穿过该高度时，展示滚动条且表头固定                                                      | number                                        | -                                         | -          |
 | fixedToColumn      | 表格列冻结设置，为 string 时仅支持从左侧冻结至某一列                                                    | string \| FixedOption                          | columns 中对应的 dataKey                                          | null       |
 | size               | 配置表格尺寸                                                                                            | string                                         | 'large' \| 'default' \| 'small' \| 'mini' | 'default'  |