table表，scroll同时使用x和y时，表头与列错位--如demo

[changhighly]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

undefined

Environment

MAC10.13.3，Google Chrome79.0.3945.79 (正式版本) （64 位），"vue": "^2.5.22",

Reproduction link

Steps to reproduce

在a-table中给:scroll添加y:300

What is expected?

表头与列对齐

What is actually happening?

表头与列错位

---

开发需求：当表中数据多时，要求限制表的高度，同时文字要一行展示，避免表头滚到屏幕上侧，于是给:scroll="{ x:true }"添加y --> :scroll="{ x:true, y:300}"，当给scroll添加y:300后，表头与列就错位了

[masterlirui]

我也遇到相同的问题 这个是官方的一个bug问题吗？

[masterlirui]

哥们儿 你解决了吗 我尝试了下 把列都设置了固定的宽度，然后把scroll.x尽量设置大一些，至少要超过你所有列的宽度总和，我这边就显示正常了 不错位。
但是有个新的问题是，给scroll.y设置高度后，如果表格内容超过这个设置值，能正常展示滚动条并且正常下拉滚动操作。但是表格内容如果没有超过这个设置值，按理说不应该出现下拉滚动条的，但是现在依然出现了一个滚动条的占位符在那儿 只是没办法下拉滚动而已 太丑了，你有遇到过吗

[changhighly]

你说的这个方法官方用法上有，但是我想做成宽度自适应那种，每次都要去调整列宽很麻烦，而且列很多，还要算一下列宽的总和来设置x。

[celizi]

你要固定表格宽度，保留一列（备注列）长度不设定

增加下面样式 去掉一直显示的滚动条
#body-table .ant-table-body{
overflow:auto !important;
}
#body-table .ant-table-header{
overflow:hidden !important;
margin-bottom: 0px !important;
}
然后出现横向滚动条超出问题，需要动态配置标题div的宽度为你的固定宽度+浏览器滚动条宽度（大于也可以，自动会对齐）
this.$refs.bodyTable.querySelectorAll('.ant-table-header .ant-table-fixed')[0].style = "width: "+1250 +"px"

这些建议作者源码同效果修改，这些只能参考 临时使用

[celizi]

同时建议进行使用时 表格单独封装为自己项目的组件，因为配置才参数很多
动态的列插槽

自己页面就几行代码就可以了

	<body-table pageMethod="applyPage" :columns="columns">
		<a slot="status">hhh</a>
		<a slot="type">type</a>
	</body-table>

[celizi]

主要是插槽传递
template v-for="column in columns" :slot="column.scopedSlots?column.scopedSlots.customRender:''"></template

[coywoo]

if (this.scroll.y >= 0) {
this.scroll.x = "100%";
}

[shanhan0]

如果（this.scroll.y> = 0）{
this.scroll.x =“ 100％”;
} 这个可以解决错位吗

[shanhan0]

你要固定表格宽度，保留一列（备注列）长度不设定

增加以下样式去掉一直显示的滚动条
＃body-table .ant-table-body {
overflow：auto！important;
}
＃body-table .ant-table-header {
overflow：hidden！important;
margin-bottom：0px！important;
}
然后出现横向滚动条超出问题，需要动态配置标题div的宽度为你的固定宽度+浏览器滚动条宽度（大于也可以，自动会对齐）
this。$ refs.bodyTable.querySelectorAll（'。ant-table -header .ant-table-fixed'）[0] .style =“ width：” +1250 +“ px”

这些建议作者二进制同效果修改，这些只能参考临时使用

可以具体说下怎么使用的吗

[celizi]

你要固定表格宽度,保留一列(备注列)长度不设定
[[#body.ant表体= 溢出：自动！重要;] #body表. ant 表标题 = 溢出：隐藏！重要;边距底部：0px！重要;] [，]，\，\）这个$ refs. bodyTable. 查询器All （']蚂蚁表 - 头. ant 表 - 固定'） {0}. style = "宽度：" [1250]" px"
这些建议作者二进制同效果修改,这些只能参考临时使用

可以具体说下怎么使用的吗

＃body-table .ant-table-body {
overflow：auto！important;
}
＃body-table .ant-table-header {
overflow：hidden！important;
margin-bottom：0px！important;
}
定义这些样式就差不多了

[celizi]

[coywoo]

2020年12月31日 上午10:41，shanhan0 ***@***.***> 写道： 如果（this.scroll.y> = 0）{ this.scroll.x =“ 100％”; } 这个可以解决错位吗 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1658 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF2B5QGXY2J6UMCNFBHZMNDSXPQF5ANCNFSM4J7EHQLQ>.

这个解决当scroll.y设置了高度后，scroll.x设置为true，横向滚动时header与tbody会错位错位,所以必须x设为100%就行了

[celizi]

表格配置：tableheight 是页面动态计算的行高
:scroll="{ x: '100%',y: this.tableheight }"

在加载数据的回调内（需要延迟一丢丢即可）：
setTimeout(function(){
//修复头部滚动条
that.monitorBar();
},50)

修复头部与内容不对齐的方法（加载数据后，计算表格内容有无滚动条，动态变更头部样式进行对齐）
monitorBar(){
var table = this.$refs.bodyTable.querySelectorAll('.ant-table-body')[0];
var header = this.$refs.bodyTable.querySelectorAll('.ant-table-header')[0];
if(table.scrollHeight>table.clientHeight){
header.style="margin-bottom: -17px; padding-bottom: 0px; min-width: 17px; overflow: scroll;"
}else{
header.style="overflow:auto;"
}
}
其他样式：
配置表格滚动条自动
#bodyTable .ant-table-body {
overflow: auto !important;
}

如果对你有帮助，请点赞。

[shanhan0]

感谢感谢，非常感谢您的解答。&nbsp;&nbsp;

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "vueComponent/ant-design-vue" <notifications@github.com&gt;; 发送时间:&nbsp;2021年1月5日(星期二) 下午4:02 收件人:&nbsp;"vueComponent/ant-design-vue"<ant-design-vue@noreply.github.com&gt;; 抄送:&nbsp;"2993369376"<2993369376@qq.com&gt;;"Comment"<comment@noreply.github.com&gt;; 主题:&nbsp;Re: [vueComponent/ant-design-vue] table表，scroll同时使用x和y时，表头与列错位--如demo (#1658) 表格配置：tableheight 是页面动态计算的行高 :scroll="{ x: '100%',y: this.tableheight }" 在加载数据的回调内（需要延迟一丢丢即可）： setTimeout(function(){ //修复头部滚动条 that.monitorBar(); },50) 修复头部与内容不对齐的方法（加载数据后，计算表格内容有无滚动条，动态变更头部样式进行对齐） monitorBar(){ var table = this.$refs.bodyTable.querySelectorAll('.ant-table-body')[0]; var header = this.$refs.bodyTable.querySelectorAll('.ant-table-header')[0]; if(table.scrollHeight&gt;table.clientHeight){ header.style="margin-bottom: -17px; padding-bottom: 0px; min-width: 17px; overflow: scroll;" //margin-bottom:0px !important; }else{ header.style="overflow:auto;" } } 其他样式： 配置表格滚动条自动 #bodyTable .ant-table-body { overflow: auto !important; } 如果对你有帮助，请点赞。 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.