el-table 使用fixed 固定列 但是固定列不会随着Y轴滑动
el-table-column prop=“date” label=“日期”
今天工作中遇到一个问题,在用el-table固定列功能的时候发现我固定的那一列不会随着未固定的表格一起沿Y轴滚动 ,像下面这种,右边动,左边不动
在网上找了一圈,发现大部分是固定列盖住了横向滚动轴的解决方法,和随Y轴滚动并没有什么关系,所以,经过我一番仔细研究,略有成就,分享出来,大家互相交流。
解决BUG:
找到el-table下面的 el-table__fixed-body-wrapper 类,添加这些属性就可以,亲测有效
.top-table{ // 我自己el-table的类名
/deep/ .el-table__row{
background: #d5d5d5;
}
/deep/ .el-table__body-wrapper{
height:calc(100vh - 30vh); // 一个是正常表格项固定高度,自己设
overflow-y: auto;
z-index: 1;
}
/deep/.el-table__fixed-body-wrapper{
height: calc(100vh - 30vh); // 一个是固定列表格项固定高度,自己设
overflow-y: auto;
pointer-events: none; // 禁止左侧固定列滑动
cursor: default;
}
/deep/ .highlightColor{
background: #FFFFFF;
}
}
如果滑动的时候有错位的话,可以再监听页面滑动的事件中添加table的这个方法
this.$refs.transitionTable.doLayout()// 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法 element-ui文档里有
BUG原因:
简单一些就是没有固定的这个div有高度而且overflow-y:auto;但是固定的这个div没有设置这些,给它加上试试,欸,就好了