69 lines
1.8 KiB
Vue
69 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>
|
|
);
|
|
},
|
|
};
|