73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
import PropTypes from '../../_util/vue-types'
|
|
import { measureScrollbar } from './utils'
|
|
import BaseTable from './BaseTable'
|
|
|
|
export default {
|
|
name: 'HeadTable',
|
|
props: {
|
|
fixed: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.bool,
|
|
]),
|
|
columns: PropTypes.array.isRequired,
|
|
tableClassName: PropTypes.string.isRequired,
|
|
handleBodyScrollLeft: PropTypes.func.isRequired,
|
|
expander: PropTypes.object.isRequired,
|
|
},
|
|
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
|
|
let { useFixedHeader } = table
|
|
const headStyle = {}
|
|
|
|
if (scroll.y) {
|
|
useFixedHeader = true
|
|
// Add negative margin bottom for scroll bar overflow bug
|
|
const scrollbarWidth = measureScrollbar('horizontal')
|
|
if (scrollbarWidth > 0 && !fixed) {
|
|
headStyle.marginBottom = `-${scrollbarWidth}px`
|
|
headStyle.paddingBottom = '0px'
|
|
}
|
|
}
|
|
|
|
if (!useFixedHeader || !showHeader) {
|
|
return null
|
|
}
|
|
return (
|
|
<div
|
|
key='headTable'
|
|
ref={fixed ? null : 'headTable'}
|
|
class={`${prefixCls}-header`}
|
|
style={headStyle}
|
|
onScroll={handleBodyScrollLeft}
|
|
>
|
|
<BaseTable
|
|
tableClassName={tableClassName}
|
|
hasHead
|
|
hasBody={false}
|
|
fixed={fixed}
|
|
columns={columns}
|
|
expander={expander}
|
|
/>
|
|
</div>
|
|
)
|
|
},
|
|
|
|
}
|