elementui table组件 表头对不齐解决方案

 

在jsp使用时发现右上角的th宽度默认为0，所以当有垂直滚动条时表头和表格内容对不齐，网上给的解决方案

https://blog.csdn.net/wwf1225/article/details/98031525

都是直接设置css来解决的，

.el-table th.gutter{

    display: table-cell!important;

  }

但我发现对于我来说没有用。

后面我找到解决方案，通过监听有body宽度变化和是否有垂直滚动条来动态设置th的宽度

// 监听
monitorTags : function(){
	var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
	var element = document.querySelector('.el-table__body');
	var observer = new MutationObserver(function(mutations) {
		mutations.forEach(function(mutation) {
			if (mutation.type == "attributes") {
				$("#app").find("col[name=gutter]").css("width", "0px");
				// 计算是否有垂直滚动条
				var table_height = $(".el-table__body-wrapper").css("height");
				var height = table_height.substring(0, table_height.length - 2);
				var clientHeight = $(".el-table__body")[0].clientHeight;
				if(height < clientHeight){
					// 有则设置滚动条上方的th宽度
					var bodyWidth = $(".el-table__body-wrapper").css("width")
					bodyWidth = bodyWidth.substring(0, bodyWidth.length - 2);
					var tableWidth = $(".el-table__body").css("width");
					tableWidth = tableWidth.substring(0, tableWidth.length - 2);
					var thWidth = bodyWidth - tableWidth;
					$("#app").find("col[name=gutter]").css("width", thWidth + "px");
				}
			}
		});
	});
	observer.observe(element, {
		attributes: true //configure it to listen to attribute changes
	});
}

通过这个方法就解决问题了，希望能帮到其他人。