自定义表格出现滚动条时,会因为宽度不对等导致样式错乱;
解决思路:
监听表格数据的变化,当表格出现滚动条时,再调用更新宽度的方法updateWidth,去改变表格头部的宽度,最终保持表格头部和内容对齐。
一、监听数据变化并更新宽度
二、给dom元素设置ref属性,方便后续获取宽度
updateWidth() {this.$nextTick(() => {if (this.$refs.otherColBodyBoxRef) {const newWidth = this.$refs.otherColBodyBoxRef.clientWidth;const progressContentRefWidth =this.$refs.progressContentRef.clientWidth;if (progressContentRefWidth - newWidth > 101) {// 滚动条this.customHeaderWidth = "calc(100% - 6px)";} else {this.customHeaderWidth = "100%";}}});},//progressContentRef是最外层大盒子的宽度
最终效果如下: