el-table组件fixed引起的表格布局错乱问题_el-table-column 滚动时fixed列高度乱

背景：最近做项目时使用el-table组件，在使用fixed布局并设置height的表格遇到以下的问题：

1、发现横向滚动条很难拉动
2、进行固定列时出现了布局错乱，错乱效果如下图（参保人基础信息 列使用了fixed进行固定）：

解决：

/*解决fixed引起的错位问题*/
.el-table{
	overflow: auto;
}
/*解决横向滚动条拉不动问题*/
.el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-wrapper{
   overflow: visible;
 }
.el-table__body-wrapper{
  overflow-x: visible !important;
}
/*这个是为了解决前面样式覆盖之后伪类带出来的竖线*/
.el-table::after{
	position: relative;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果你修改了滚动条的样式，那么需要加上下面的样式来改变表格的边距

/deep/.el-table__fixed-right {
  right: 7px!important;
}

1
2
3
4
5

扩展：

如果你的表格中是因为加载数据后的表头不一致导致错位，那么可以使用 el-table的doLayout方法进行重新布局

<el-table ref="table" :data="tableData">
  ...
</el-table>

async getTableData(){
	const {code, data, msg} = await getTableData({
		pageNum: this.pageNum,
		pageSize: this.pageSize
	})
	if(code != 200) return this.$message.error(msg ? msg : '获取数据失败')
	this.tableData = rows ? rows : []
	this.$nextTick(() => {
		this.$refs.table.doLayout()
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15