如果中间表格有某一列的内容有换行或者特殊内容等, ,这会导致表格实际高度比没有特殊内容要高。三个表格初次渲染的时候,由于中间表格高度还在变化,左右两边的表格读取到的高度不准确。导致错位。 错位消失机制 经反复测试发现只要触发table表格页面重排,错位就消失了,例如勾选一下选择列,点击刷新按钮重新调下接口重新加...
百度到了说需要直接把表格头固定宽,试了下有效果但觉得的不够灵活,于是自己找到了一个较好的方法。这也解决了横向滚动条拖到底列不对齐的问题。 相比固定宽,可以一劳永逸。 // 全局中添加以下样式.ant-table-fixed-header.ant-table-scroll.ant-table-header{width:calc(100%-8px);//减去滚动条的宽度}...
但是我在使用时发现,不仅要设置width,表头列的宽度和内容列的宽度和还需要相等才行。 padding, border 和 margin a-table组件,th,td自带有默认的padding值,在这里我怕影响展示效果,就给换成了自己的。这里注意th,td的box-sizeing属性的值是border-box,也就是说宽度和高度影响了边框盒,就算添加了padding和border...
1.1.有列(column)没有设置宽度:表头固定时,导致表头宽度计算错误,表头列和内容列对不齐 1.2.语句/单词过长: antd根据语义/单词断句换行,实际列宽超出了设置的宽度,导致列对不齐; 1.3.开启了单选功能:单选列表头宽度计算错误,导致列对不齐 2.横向/行对不齐 2.1.固定(fixed)列的高度高于普通列:普通列的高度与...
在 ant-design-vue 中,我们可以通过设置 a-table 组件的 scroll 属性来开启虚拟滚动功能: ``` <template> <a-table :scroll="{ y: 600 }" ... </a-table> </template> ``` 通过以上实际操作示例,我们希望能够为大家提供解决ant-design-vue表格错位问题时的参考思路和操作方法。 六、解决效果与注意...
简介:ant design vue a-table 表头和内容不对齐,一行代码解决问题 动态设置x轴的长度就可以了,有几列表头就设置成百分之几,完美~ 1.<a-table:columns="columns":data-source="data"size="small":loading="loading2":scroll="{ x: `${columns.length}0%`, y: 400 }"//关键代码>...
ant-design-vue model上的table固定列与正常列表高度不一致问题解决 解决思路,根据id获取表格列表行高度,固定列重新根据列表高度进行渲染 <template><a-modal...><a-tableid="fixedTable"...></a-table></a-modal></template><script>export default{ methods...
加了y滚动条后表格就错位,需要给所有列加上宽度百分比,如果有单选这种特殊列,要在表格列拿出2%给它,其余列相加之和为98%即可。 然后还加了一个全局样式 .ant-table-tbody > tr > td { white-space: break-spaces; }
加了y滚动条后表格就错位,需要给所有列加上宽度百分比,如果有单选这种特殊列,要在表格列拿出2%给它,其余列相加之和为98%即可。 然后还加了一个全局样式 .ant-table-tbody > tr > td { white-space: break-spaces; }