+
Fixed columns
+
+ { this.show ?
record.title}
+ expandIconAsCell
+ scroll={{ x: 1200 }}
+ data={data}
+ /> : null}
+
+ )
+ },
+}
diff --git a/components/vc-table/src/BaseTable.jsx b/components/vc-table/src/BaseTable.jsx
index 93a624224..094ed49f4 100644
--- a/components/vc-table/src/BaseTable.jsx
+++ b/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`
}
}
diff --git a/components/vc-table/src/BodyTable.jsx b/components/vc-table/src/BodyTable.jsx
index 6cb8d69be..c39edf690 100644
--- a/components/vc-table/src/BodyTable.jsx
+++ b/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 {
diff --git a/components/vc-table/src/ExpandableRow.jsx b/components/vc-table/src/ExpandableRow.jsx
index cfd431197..4a2acdf86 100644
--- a/components/vc-table/src/ExpandableRow.jsx
+++ b/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 = {
diff --git a/components/vc-table/src/ExpandableTable.jsx b/components/vc-table/src/ExpandableTable.jsx
index fc8402b3c..2aead09c7 100644
--- a/components/vc-table/src/ExpandableTable.jsx
+++ b/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,
diff --git a/components/vc-table/src/HeadTable.jsx b/components/vc-table/src/HeadTable.jsx
index 99c6468f0..24402670e 100644
--- a/components/vc-table/src/HeadTable.jsx
+++ b/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
diff --git a/components/vc-table/src/Table.jsx b/components/vc-table/src/Table.jsx
index 84217873a..49c91a5c9 100644
--- a/components/vc-table/src/Table.jsx
+++ b/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 ? (
- {title(this.props.data)}
+ {title(data)}
) : null
},
renderFooter () {
- const { footer, prefixCls } = this
+ const { footer, prefixCls, data } = this
return footer ? (
) : null
},
diff --git a/components/vc-table/src/TableRow.jsx b/components/vc-table/src/TableRow.jsx
index a64570267..21d4f28f3 100644
--- a/components/vc-table/src/TableRow.jsx
+++ b/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'
diff --git a/examples/routes.js b/examples/routes.js
index 136f1b381..9ea148250 100644
--- a/examples/routes.js
+++ b/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 [