Ant Design Vue (3) table 表头与数据错位的解决方法

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