Ant Design Vue (3) table 表头与数据错位的解决方法
Ant Design Vuetable组件表头与数据错位对不齐解决方案使用word-break: break-all超过定义宽度自动换行
·
Ant Design Vue table组件表头与数据错位 对不齐解决方案 使用word-break: break-all 超过定义宽度自动换行
在使用Antdv的table组件时,因为表头参数过多,所以 设置了scroll属性,在其超出列宽后表头与数据会错乱
如图:
解决方法:
style="word-break: break-all;" //超过定义宽度自动换行
代码如下:
<a-table
ref="table"
size="small"
bordered
rowKey="id"
:columns="columns"
:components="components"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:scroll="scrollTable"
:customRow="rowClick"
:rowClassName="tableRowClass"
@change="handleTableChange"
style="word-break: break-all;"
></a-table>
scroll 增加横向滚动轴
scrollTable: {
x: 'max-content',
y: 'calc(100vh - 440px)'
},
max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本,则相当于文本不换行
更多推荐
已为社区贡献3条内容
所有评论(0)