update vc-table

components/vc-table/demo/expandedRowRender.js

@@ -29,21 +29,15 @@ export default {
     },
 
     onExpandedRowsChange (rows) {
-      this.setState({
-        expandedRowKeys: rows,
-      })
+      this.expandedRowKeys = rows
     },
 
     onExpandIconAsCellChange  (e) {
-      this.setState({
-        expandIconAsCell: e.target.checked,
-      })
+      this.expandIconAsCell = e.target.checked
     },
 
     onExpandRowByClickChange  (e) {
-      this.setState({
-        expandRowByClick: e.target.checked,
-      })
+      this.expandRowByClick = e.target.checked
     },
 
     toggleButton () {
@@ -58,7 +52,7 @@ export default {
     remove (index) {
       const data = this.data
       data.splice(index, 1)
-      this.setState({ data })
+      this.data = data
     },
 
     expandedRowRender (record) {

components/vc-table/demo/fixedColumns-auto-height.js

@@ -0,0 +1,53 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const columns = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
+  { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left' },
+  { title: 'title3', dataIndex: 'c', key: 'c' },
+  { title: 'title4', dataIndex: 'b', key: 'd' },
+  { title: 'title5', dataIndex: 'b', key: 'e' },
+  { title: 'title6', dataIndex: 'b', key: 'f',
+    render: (h) => <div style={{ height: '40px', lineHeight: '40px' }}>我很高</div> },
+  { title: 'title7', dataIndex: 'b', key: 'g' },
+  { title: 'title8', dataIndex: 'b', key: 'h' },
+  { title: 'title9', dataIndex: 'b', key: 'i' },
+  { title: 'title10', dataIndex: 'b', key: 'j' },
+  { title: 'title11', dataIndex: 'b', key: 'k' },
+  { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
+]
+
+const data = [
+  { a: '123', b: 'xxxxxxxx', d: 3, key: '1', title: 'hello' },
+  { a: 'cdd', b: 'edd12221', d: 3, key: '2', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '3', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '4', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '5', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '6', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '7', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '8', title: 'hello' },
+  { a: '133', c: 'edd12221', d: 2, key: '9', title: 'hello' },
+]
+export default {
+  data () {
+    return {
+      show: false,
+    }
+  },
+  render () {
+    return (
+      <div style={{ width: '800px' }}>
+        <h2>Fixed columns</h2>
+        <button onClick={() => { this.show = true }}>show Table</button>
+        { this.show ? <Table
+          columns={columns}
+          expandedRowRender={record => record.title}
+          expandIconAsCell
+          scroll={{ x: 1200 }}
+          data={data}
+        /> : null}
+      </div>
+    )
+  },
+}

components/vc-table/src/BaseTable.jsx

@@ -28,7 +28,7 @@ const BaseTable = {
   },
   methods: {
     handleRowHover  (isHover, key) {
-      this.props.store.setState({
+      this.store.setState({
         currentHoverKey: isHover ? key : null,
       })
     },
@@ -159,7 +159,7 @@ const BaseTable = {
       if (scroll.x === true) {
         tableStyle.tableLayout = 'fixed'
       } else {
-        tableStyle.width = scroll.x
+        tableStyle.width = `${scroll.x}px`
       }
     }
 

components/vc-table/src/BodyTable.jsx

@@ -19,6 +19,21 @@ export default {
   inject: {
     table: { default: {}},
   },
+  mounted () {
+    this.updateTableRef()
+  },
+  updated () {
+    this.updateTableRef()
+  },
+  methods: {
+    updateTableRef () {
+      this.$nextTick(() => {
+        this.$refs.fixedColumnsBodyLeft && this.table.saveChildrenRef('fixedColumnsBodyLeft', this.$refs.fixedColumnsBodyLeft)
+        this.$refs.fixedColumnsBodyRight && this.table.saveChildrenRef('fixedColumnsBodyRight', this.$refs.fixedColumnsBodyLeft)
+        this.$refs.bodyTable && this.table.saveChildrenRef('bodyTable', this.$refs.bodyTable)
+      })
+    },
+  },
   render () {
     const { prefixCls, scroll } = this.table
     const {

components/vc-table/src/ExpandableRow.jsx

@@ -36,9 +36,9 @@ const ExpandableRow = {
   methods: {
     hasExpandIcon (columnIndex) {
       const { expandRowByClick } = this
-      return !this.expandIconAsCell &&
+      return !this.tempExpandIconAsCell &&
         !expandRowByClick &&
-        columnIndex === this.expandIconColumnIndex
+        columnIndex === this.tempExpandIconColumnIndex
     },
 
     handleExpandChange (record, event) {
@@ -75,7 +75,7 @@ const ExpandableRow = {
     },
 
     renderExpandIconCell  (cells) {
-      if (!this.expandIconAsCell) {
+      if (!this.tempExpandIconAsCell) {
         return
       }
       const { prefixCls } = this
@@ -101,8 +101,8 @@ const ExpandableRow = {
       $scopedSlots,
     } = this
 
-    this.expandIconAsCell = fixed !== 'right' ? this.expandIconAsCell : false
-    this.expandIconColumnIndex = fixed !== 'right' ? this.expandIconColumnIndex : -1
+    this.tempExpandIconAsCell = fixed !== 'right' ? this.expandIconAsCell : false
+    this.tempExpandIconColumnIndex = fixed !== 'right' ? this.expandIconColumnIndex : -1
     const childrenData = record[childrenColumnName]
     this.expandable = !!(childrenData || expandedRowRender)
     const expandableRowProps = {

components/vc-table/src/ExpandableTable.jsx

@@ -7,6 +7,7 @@ import { initDefaultProps, getOptionProps } from '../../_util/props-util'
 
 export const ExpandableTableProps = () => ({
   expandIconAsCell: PropTypes.bool,
+  expandRowByClick: PropTypes.bool,
   expandedRowKeys: PropTypes.array,
   expandedRowClassName: PropTypes.func,
   defaultExpandAllRows: PropTypes.bool,

components/vc-table/src/HeadTable.jsx

@@ -17,6 +17,19 @@ export default {
   inject: {
     table: { default: {}},
   },
+  mounted () {
+    this.updateTableRef()
+  },
+  updated () {
+    this.updateTableRef()
+  },
+  methods: {
+    updateTableRef () {
+      this.$nextTick(() => {
+        this.$refs.headTable && this.table.saveChildrenRef('headTable', this.$refs.headTable)
+      })
+    },
+  },
   render () {
     const { columns, fixed, tableClassName, handleBodyScrollLeft, expander, table } = this
     const { prefixCls, scroll, showHeader } = table

components/vc-table/src/Table.jsx

@@ -61,6 +61,7 @@ export default {
     expandedRowRender: PropTypes.func,
     childrenColumnName: PropTypes.string,
     indentSize: PropTypes.number,
+    expandRowByClick: PropTypes.bool,
   }, {
     data: [],
     useFixedHeader: false,
@@ -217,15 +218,15 @@ export default {
 
     setScrollPosition (position) {
       this.scrollPosition = position
-      if (this.tableNode) {
+      if (this.$refs.tableNode) {
         const { prefixCls } = this
         if (position === 'both') {
-          classes(this.tableNode)
+          classes(this.$refs.tableNode)
             .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
             .add(`${prefixCls}-scroll-position-left`)
             .add(`${prefixCls}-scroll-position-right`)
         } else {
-          classes(this.tableNode)
+          classes(this.$refs.tableNode)
             .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
             .add(`${prefixCls}-scroll-position-${position}`)
         }
@@ -233,7 +234,7 @@ export default {
     },
 
     setScrollPositionClassName () {
-      const node = this.bodyTable
+      const node = this.ref_bodyTable
       const scrollToLeft = node.scrollLeft === 0
       const scrollToRight = node.scrollLeft + 1 >=
         node.children[0].getBoundingClientRect().width -
@@ -255,17 +256,17 @@ export default {
     },
 
     syncFixedTableRowHeight () {
-      const tableRect = this.tableNode.getBoundingClientRect()
+      const tableRect = this.$refs.tableNode.getBoundingClientRect()
       // If tableNode's height less than 0, suppose it is hidden and don't recalculate rowHeight.
       // see: https://github.com/ant-design/ant-design/issues/4836
       if (tableRect.height !== undefined && tableRect.height <= 0) {
         return
       }
-      const { prefixCls } = this.props
-      const headRows = this.headTable
-        ? this.headTable.querySelectorAll('thead')
-        : this.bodyTable.querySelectorAll('thead')
-      const bodyRows = this.bodyTable.querySelectorAll(`.${prefixCls}-row`) || []
+      const { prefixCls } = this
+      const headRows = this.ref_headTable
+        ? this.ref_headTable.querySelectorAll('thead')
+        : this.ref_bodyTable.querySelectorAll('thead')
+      const bodyRows = this.ref_bodyTable.querySelectorAll(`.${prefixCls}-row`) || []
       const fixedColumnsHeadRowsHeight = [].map.call(
         headRows, row => row.getBoundingClientRect().height || 'auto'
       )
@@ -277,7 +278,7 @@ export default {
           shallowequal(state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
         return
       }
-
+      console.log(fixedColumnsHeadRowsHeight, fixedColumnsBodyRowsHeight)
       this.store.setState({
         fixedColumnsHeadRowsHeight,
         fixedColumnsBodyRowsHeight,
@@ -285,11 +286,11 @@ export default {
     },
 
     resetScrollX () {
-      if (this.headTable) {
-        this.headTable.scrollLeft = 0
+      if (this.ref_headTable) {
+        this.ref_headTable.scrollLeft = 0
       }
-      if (this.bodyTable) {
-        this.bodyTable.scrollLeft = 0
+      if (this.ref_bodyTable) {
+        this.ref_bodyTable.scrollLeft = 0
       }
     },
 
@@ -305,12 +306,12 @@ export default {
       }
       const target = e.target
       const { scroll = {}} = this
-      const { headTable, bodyTable } = this
+      const { ref_headTable, ref_bodyTable } = this
       if (target.scrollLeft !== this.lastScrollLeft && scroll.x) {
-        if (target === bodyTable && headTable) {
-          headTable.scrollLeft = target.scrollLeft
-        } else if (target === headTable && bodyTable) {
-          bodyTable.scrollLeft = target.scrollLeft
+        if (target === ref_bodyTable && ref_headTable) {
+          ref_headTable.scrollLeft = target.scrollLeft
+        } else if (target === ref_headTable && ref_bodyTable) {
+          ref_bodyTable.scrollLeft = target.scrollLeft
         }
         this.setScrollPositionClassName()
       }
@@ -321,8 +322,8 @@ export default {
     handleBodyScrollTop  (e) {
       const target = e.target
       const { scroll = {}} = this
-      const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this
-      if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== headTable) {
+      const { ref_headTable, ref_bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this
+      if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== ref_headTable) {
         const scrollTop = target.scrollTop
         if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) {
           fixedColumnsBodyLeft.scrollTop = scrollTop
@@ -330,8 +331,8 @@ export default {
         if (fixedColumnsBodyRight && target !== fixedColumnsBodyRight) {
           fixedColumnsBodyRight.scrollTop = scrollTop
         }
-        if (bodyTable && target !== bodyTable) {
-          bodyTable.scrollTop = scrollTop
+        if (ref_bodyTable && target !== ref_bodyTable) {
+          ref_bodyTable.scrollTop = scrollTop
         }
       }
       // Remember last scrollTop for scroll direction detecting.
@@ -342,7 +343,9 @@ export default {
       this.handleBodyScrollLeft(e)
       this.handleBodyScrollTop(e)
     },
-
+    saveChildrenRef (name, node) {
+      this[`ref_${name}`] = node
+    },
     renderMainTable () {
       const { scroll, prefixCls } = this
       const isAnyColumnsFixed = this.columnManager.isAnyColumnsFixed()
@@ -420,19 +423,19 @@ export default {
     },
 
     renderTitle () {
-      const { title, prefixCls } = this
+      const { title, prefixCls, data } = this
       return title ? (
         <div class={`${prefixCls}-title`} key='title'>
-          {title(this.props.data)}
+          {title(data)}
         </div>
       ) : null
     },
 
     renderFooter () {
-      const { footer, prefixCls } = this
+      const { footer, prefixCls, data } = this
       return footer ? (
         <div class={`${prefixCls}-footer`} key='footer'>
-          {footer(this.props.data)}
+          {footer(data)}
         </div>
       ) : null
     },

components/vc-table/src/TableRow.jsx

@@ -2,7 +2,7 @@ import PropTypes from '../../_util/vue-types'
 import { connect } from '../../_util/store'
 import TableCell from './TableCell'
 import { warningOnce } from './utils'
-import { initDefaultProps, mergeProps } from '../../_util/props-util'
+import { initDefaultProps, mergeProps, getStyle } from '../../_util/props-util'
 import BaseMixin from '../../_util/BaseMixin'
 function noop () {}
 const TableRow = {
@@ -78,15 +78,15 @@ const TableRow = {
     },
   },
 
-  componentWillReceiveProps (nextProps) {
-    if (this.props.visible || (!this.props.visible && nextProps.visible)) {
-      this.shouldRender = true
-    }
-  },
+  // componentWillReceiveProps (nextProps) {
+  //   if (this.props.visible || (!this.props.visible && nextProps.visible)) {
+  //     this.shouldRender = true
+  //   }
+  // },
 
-  shouldComponentUpdate (nextProps) {
-    return !!(this.props.visible || nextProps.visible)
-  },
+  // shouldComponentUpdate (nextProps) {
+  //   return !!(this.props.visible || nextProps.visible)
+  // },
 
   updated () {
     if (this.shouldRender && !this.rowRef) {
@@ -144,16 +144,16 @@ const TableRow = {
 
     getStyle () {
       const { height, visible } = this
-
-      if (height && height !== this.style.height) {
-        this.style = { ...this.style, height }
+      let style = getStyle(this)
+      if (height) {
+        style = { ...style, height }
       }
 
-      if (!visible && !this.style.display) {
-        this.style = { ...this.style, display: 'none' }
+      if (!visible && !style.display) {
+        style = { ...style, display: 'none' }
       }
 
-      return this.style
+      return style
     },
 
     saveRowRef () {
@@ -239,7 +239,7 @@ const TableRow = {
 
     const rowProps = onRow(record, index)
     const customStyle = rowProps ? rowProps.style : {}
-    let style = { height }
+    let style = { height: typeof height === 'number' ? `${height}px` : height }
 
     if (!visible) {
       style.display = 'none'

examples/routes.js

@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/vc-slider/demo/${d}`),
+    component: import(`../components/vc-table/demo/${d}`),
   }
 }
 export default [