ant-design-vue/components/vc-table/src/BodyTable.jsx

135 lines
3.7 KiB
React
Raw Normal View History

2018-03-24 14:02:24 +00:00
import PropTypes from '../../_util/vue-types'
import { measureScrollbar } from './utils'
import BaseTable from './BaseTable'
export default {
name: 'BodyTable',
props: {
fixed: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
]),
columns: PropTypes.array.isRequired,
tableClassName: PropTypes.string.isRequired,
handleBodyScroll: PropTypes.func.isRequired,
getRowKey: PropTypes.func.isRequired,
expander: PropTypes.object.isRequired,
isAnyColumnsFixed: PropTypes.bool,
},
inject: {
table: { default: {}},
},
2018-03-26 15:05:29 +00:00
mounted () {
this.updateTableRef()
},
updated () {
this.updateTableRef()
},
methods: {
updateTableRef () {
this.$nextTick(() => {
this.$refs.fixedColumnsBodyLeft && this.table.saveChildrenRef('fixedColumnsBodyLeft', this.$refs.fixedColumnsBodyLeft)
2018-03-27 11:43:22 +00:00
this.$refs.fixedColumnsBodyRight && this.table.saveChildrenRef('fixedColumnsBodyRight', this.$refs.fixedColumnsBodyRight)
2018-03-26 15:05:29 +00:00
this.$refs.bodyTable && this.table.saveChildrenRef('bodyTable', this.$refs.bodyTable)
})
},
},
2018-03-24 14:02:24 +00:00
render () {
const { prefixCls, scroll } = this.table
const {
columns,
fixed,
tableClassName,
getRowKey,
handleBodyScroll,
expander,
isAnyColumnsFixed,
} = this
let { useFixedHeader } = this.table
const bodyStyle = { ...this.table.bodyStyle }
const innerBodyStyle = {}
if (scroll.x || fixed) {
bodyStyle.overflowX = bodyStyle.overflowX || 'auto'
// Fix weired webkit render bug
// https://github.com/ant-design/ant-design/issues/7783
bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)'
}
if (scroll.y) {
// maxHeight will make fixed-Table scrolling not working
// so we only set maxHeight to body-Table here
2018-03-27 11:43:22 +00:00
let maxHeight = bodyStyle.maxHeight || scroll.y
maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
2018-03-24 14:02:24 +00:00
if (fixed) {
2018-03-27 11:43:22 +00:00
innerBodyStyle.maxHeight = maxHeight
2018-03-24 14:02:24 +00:00
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll'
} else {
2018-03-27 11:43:22 +00:00
bodyStyle.maxHeight = maxHeight
2018-03-24 14:02:24 +00:00
}
bodyStyle.overflowY = bodyStyle.overflowY || 'scroll'
useFixedHeader = true
// Add negative margin bottom for scroll bar overflow bug
const scrollbarWidth = measureScrollbar()
if (scrollbarWidth > 0 && fixed) {
bodyStyle.marginBottom = `-${scrollbarWidth}px`
bodyStyle.paddingBottom = '0px'
}
}
const baseTable = (
<BaseTable
tableClassName={tableClassName}
hasHead={!useFixedHeader}
hasBody
fixed={fixed}
columns={columns}
expander={expander}
getRowKey={getRowKey}
isAnyColumnsFixed={isAnyColumnsFixed}
/>
)
if (fixed && columns.length) {
let refName
if (columns[0].fixed === 'left' || columns[0].fixed === true) {
refName = 'fixedColumnsBodyLeft'
} else if (columns[0].fixed === 'right') {
refName = 'fixedColumnsBodyRight'
}
delete bodyStyle.overflowX
delete bodyStyle.overflowY
return (
<div
key='bodyTable'
class={`${prefixCls}-body-outer`}
style={{ ...bodyStyle }}
>
<div
class={`${prefixCls}-body-inner`}
style={innerBodyStyle}
ref={refName}
onScroll={handleBodyScroll}
>
{baseTable}
</div>
</div>
)
}
return (
<div
key='bodyTable'
class={`${prefixCls}-body`}
style={bodyStyle}
ref='bodyTable'
onScroll={handleBodyScroll}
>
{baseTable}
</div>
)
},
}