135 lines
3.7 KiB
JavaScript
135 lines
3.7 KiB
JavaScript
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: {}},
|
|
},
|
|
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.fixedColumnsBodyRight)
|
|
this.$refs.bodyTable && this.table.saveChildrenRef('bodyTable', this.$refs.bodyTable)
|
|
})
|
|
},
|
|
},
|
|
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
|
|
let maxHeight = bodyStyle.maxHeight || scroll.y
|
|
maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
|
|
if (fixed) {
|
|
innerBodyStyle.maxHeight = maxHeight
|
|
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll'
|
|
} else {
|
|
bodyStyle.maxHeight = maxHeight
|
|
}
|
|
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>
|
|
)
|
|
},
|
|
|
|
}
|
|
|