Description
Table表格新增最小高度min-height,方便使用最小高度
props: { minHeight: { type: [Number, String] } }
computed-->styles
styles () { let style = {}; if (this.height) { const height = parseInt(this.height); style.height =
${height}px; } if (this.maxHeight) { const maxHeight = parseInt(this.maxHeight); style.maxHeight =
${maxHeight}px; } if (this.minHeight) { const minHeight = parseInt(this.minHeight); style.minHeight =
${minHeight}px; } if (this.width) style.width =
${this.width}px; return style; },
computed-->bodyStyle
bodyStyle () { let style = {}; if (this.bodyHeight !== 0) { const height = this.bodyHeight; if (this.height) { style.height =
${height}px; } else if (this.maxHeight) { style.maxHeight =
${height}px; } else if (this.minHeight) { style.minHeight =
${height}px; } } return style; }
computed-->toggleExpand
`
toggleExpand (_index) {
let data = {};
for (let i in this.objData) {
if (parseInt(i) === _index) {
data = this.objData[i];
break;
}
}
const status = !data._isExpanded;
this.objData[_index]._isExpanded = status;
this.$emit('on-expand', JSON.parse(JSON.stringify(this.cloneData[_index])), status);
if(this.height || this.maxHeight || this.minHeight){
this.$nextTick(()=>this.fixedBody());
}
}
computed-->fixedHeader
fixedHeader () {
if (this.height || this.maxHeight || this.minHeight) {
this.$nextTick(() => {
const titleHeight = parseInt(getStyle(this.$refs.title, 'height')) || 0;
const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0;
const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0;
if (this.height) {
this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
} else if (this.maxHeight) {
this.bodyHeight = this.maxHeight - titleHeight - headerHeight - footerHeight;
} else if (this.minHeight) {
this.bodyHeight = this.minHeight - titleHeight - headerHeight - footerHeight;
}
this.$nextTick(()=>this.fixedBody());
});
} else {
this.bodyHeight = 0;
this.$nextTick(()=>this.fixedBody());
}
}
watch-->minHeight
minHeight () {
this.handleResize();
},
`