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表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本,则相当于文本不换行

Logo

前往低代码交流专区

更多推荐