大数据在expandedRow下的场景

demo/demolist/Demo31.js

@@ -68,7 +68,16 @@ class Demo31 extends Component {
   constructor(props){
     super(props);
     this.state={
-      data_obj:{}
+      data_obj:{
+        0:[
+          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+          { a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
+        ],
+        1: [
+          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+          { a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
+        ],
+      }
     }
   }
   expandedRowRender = (record, index, indent) => {
@@ -121,6 +130,7 @@ class Demo31 extends Component {
         onExpand={this.getData}
         expandedRowRender={this.expandedRowRender}
         scroll={{y:350}}
+        defaultExpandedRowKeys={[0,1]}
         title={currentData => <div>标题: 这是一个标题</div>}
         footer={currentData => <div>表尾: 我是小尾巴</div>}
       />

dist/demo.css

@@ -8417,7 +8417,6 @@ ul {
 .u-table {
   font-size: 12px;
   color: #666;
-  transition: opacity 0.3s ease;
   position: relative;
   line-height: 1.5;
   overflow: hidden; }
@@ -8435,8 +8434,7 @@ ul {
     border-collapse: collapse;
     text-align: left; }
   .u-table th {
-    font-weight: bold;
+    font-weight: bold; }
-    transition: background 0.3s ease; }
     .u-table th[colspan] {
       text-align: center; }
     .u-table th ::last-child {

src/Table.js

@@ -579,6 +579,7 @@ class Table extends Component {
           fixed={fixed}
           lazyCurrentIndex={lazyCurrentIndex}
           expandedContentHeight={expandedContentHeight}
+          setRowHeight={props.setRowHeight}
         />
       );
       this.treeRowIndex++;

src/Table.scss

@@ -17,7 +17,7 @@ $checkbox-height:16px;
 .u-table {
   font-size: $font-size-base;
   color: $text-color;
-  transition: opacity 0.3s ease;
+  // transition: opacity 0.3s ease;
   position: relative;
   line-height: $line-height;
   overflow: hidden;
@@ -43,7 +43,7 @@ $checkbox-height:16px;
   th {
     // background: $table-head-background-color;
     font-weight: bold;
-    transition: background 0.3s ease;
+    // transition: background 0.3s ease;
     &[colspan] {
       text-align: center;
     }

src/TableRow.js

@@ -68,6 +68,12 @@ class TableRow extends Component{
     this.setRowHeight()
   }
 
+
+  componentDidUpdate(prevProps) {
+    if (this.props.index !== prevProps.index) {
+      this.setRowHeight()
+    }
+  }
   componentWillUnmount() {
     const { record, onDestroy, index } = this.props;
     onDestroy(record, index);
@@ -78,9 +84,9 @@ class TableRow extends Component{
 
 
   setRowHeight() {
-    const { setRowHeight , expandedContentHeight} = this.props
+    const { setRowHeight , expandedContentHeight,lazyCurrentIndex=0,fixed} = this.props
-    if (!setRowHeight || !this.element) return
+    if (!setRowHeight || !this.element || fixed) return
-    setRowHeight(this.element.clientHeight + expandedContentHeight, this.props.index)
+    setRowHeight(this.element.clientHeight + expandedContentHeight, this.props.index+lazyCurrentIndex)
   }
 
   onRowClick(event) {

src/lib/bigData.js

@@ -19,9 +19,12 @@ export default function bigData(Table) {
         scrollTop: 0
       };
       const rowHeight = this.props.height?this.props.height:defaultHeight
+      //默认显示25条，rowsInView根据定高算的。在非固定高下，这个只是一个大概的值。
       this.rowsInView = this.props.scroll.y?Math.ceil(this.props.scroll.y/rowHeight):25 ;
       this.cachedRowHeight = [];
       this.lastScrollTop = 0;
+
+      this.setRowHeight = this.setRowHeight.bind(this);
     }
     /**
      *获取数据区高度
@@ -43,16 +46,16 @@ export default function bigData(Table) {
       return sumHeight;
     }
 
-    getIndex(scrollTop = this.state.scrollTop) {
+    // getIndex(scrollTop = this.state.scrollTop) {
-        const { data } = this.props
+    //     const { data } = this.props
-        const {rowsInView} = this;
+    //     const {rowsInView} = this;
-        const max = data.length
+    //     const max = data.length
-        const mcf = scrollTop > 0.5 ? Math.ceil : Math.floor
+    //     const mcf = scrollTop > 0.5 ? Math.ceil : Math.floor
-        let index = mcf((scrollTop * max) - (rowsInView * scrollTop))
+    //     let index = mcf((scrollTop * max) - (rowsInView * scrollTop))
-        if (index > max - rowsInView) index = max - rowsInView
+    //     if (index > max - rowsInView) index = max - rowsInView
-        if (index < 0) index = 0
+    //     if (index < 0) index = 0
-        return index
+    //     return index
-    }
+    // }
 
 
     // getLastRowHeight = (index) =>{
@@ -91,20 +94,12 @@ export default function bigData(Table) {
         if(currentIndex !== index){
             this.setState({ currentIndex: index ,scrollTop:scrollTop})
         }
-        // this.lastScrollTop = scrollTop;
+       
-        //scrollTop/rowHeight如果小于0.5按当前值，如果大于0.5为下一个，currentIndex 值
     }
     
     setRowHeight(height, index) {
-        const oldHeight = this.cachedRowHeight[index]
         this.cachedRowHeight[index] = height
-        const rowHeight = this.props.height?this.props.height:defaultHeight;
+    }
-        let { currentIndex ,scrollTop} = this.state
-        if (currentIndex === index && !oldHeight) {
-            scrollTop += height - rowHeight;
-        }
-        this.setState({scrollTop});
-      }
     render() {
       const { data } = this.props;
       const { currentIndex,scrollTop } = this.state;