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

changhighly · 2019-12-25T10:48:40Z

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 · 2020-01-07T09:24:48Z

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

masterlirui · 2020-01-08T02:09:52Z

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

changhighly · 2020-01-08T02:13:44Z

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

celizi · 2020-05-25T08:01:26Z

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

增加下面样式去掉一直显示的滚动条
#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 · 2020-05-25T08:03:33Z

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

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

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

celizi · 2020-05-25T08:04:17Z

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

coywoo · 2020-12-21T10:56:38Z

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

shanhan0 · 2020-12-31T02:41:22Z

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

shanhan0 · 2021-01-05T06:26:37Z

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

增加以下样式去掉一直显示的滚动条
＃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 · 2021-01-05T06:37:42Z

你要固定表格宽度,保留一列(备注列)长度不设定
[[#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 · 2021-01-05T06:39:38Z

coywoo · 2021-01-05T07:12:06Z

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 · 2021-01-05T08:01:46Z

表格配置：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 · 2021-01-06T01:58:48Z

感谢感谢，非常感谢您的解答。  

…

------------------ 原始邮件 ------------------ 发件人: "vueComponent/ant-design-vue" <notifications@github.com>; 发送时间: 2021年1月5日(星期二) 下午4:02 收件人: "vueComponent/ant-design-vue"<ant-design-vue@noreply.github.com>; 抄送: "2993369376"<2993369376@qq.com>;"Comment"<comment@noreply.github.com>; 主题: 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>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.

fangzesen · 2021-04-24T13:03:44Z

你要固定表格宽度,保留一列(备注列)长度不设定
[[#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;
}
定义这些样式就差不多了

按照这个方法当横向滚动到最后ant-table-body会比表头多一个滚动条的占位，所以我这边的方法直接表头补多一个滚动条的占位，代码如下：
＃body-table .ant-table-body {
overflow：auto！important;
}
＃body-table .ant-table-header {
overflow：hidden！important;
margin-bottom：0px！important;
margin-right: 16px
}

maqiushun · 2022-06-07T06:21:28Z

x的值设置为100%就可以了

tangjinzhou added the enhancement label Feb 6, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

changhighly commented Dec 25, 2019 •

edited

Loading

masterlirui commented Jan 7, 2020

masterlirui commented Jan 8, 2020

changhighly commented Jan 8, 2020

celizi commented May 25, 2020 •

edited

Loading

celizi commented May 25, 2020

celizi commented May 25, 2020

coywoo commented Dec 21, 2020

shanhan0 commented Dec 31, 2020

shanhan0 commented Jan 5, 2021

celizi commented Jan 5, 2021

celizi commented Jan 5, 2021

coywoo commented Jan 5, 2021 via email

celizi commented Jan 5, 2021 •

edited

Loading

shanhan0 commented Jan 6, 2021 via email

fangzesen commented Apr 24, 2021

maqiushun commented Jun 7, 2022

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

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

Comments

changhighly commented Dec 25, 2019 • edited Loading

Version

Environment

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

masterlirui commented Jan 7, 2020

masterlirui commented Jan 8, 2020

changhighly commented Jan 8, 2020

celizi commented May 25, 2020 • edited Loading

celizi commented May 25, 2020

celizi commented May 25, 2020

coywoo commented Dec 21, 2020

shanhan0 commented Dec 31, 2020

shanhan0 commented Jan 5, 2021

celizi commented Jan 5, 2021

celizi commented Jan 5, 2021

coywoo commented Jan 5, 2021 via email

celizi commented Jan 5, 2021 • edited Loading

shanhan0 commented Jan 6, 2021 via email

fangzesen commented Apr 24, 2021

maqiushun commented Jun 7, 2022

changhighly commented Dec 25, 2019 •

edited

Loading

celizi commented May 25, 2020 •

edited

Loading

celizi commented Jan 5, 2021 •

edited

Loading