今天测试遇到一个问题,如下图所示:使用ant design vue的框架搭建的表格中,出现表头和表体出现错位的问题。

在这里插入图片描述

解决方法如下:

1.设置scroll——:scroll="{ y: 500, x: 1400 }"

主要是横向要设置,也就是xy方向设置是为了固定表头。

2.设置columns——列宽度

<a-table
      :rowKey="(r, i) => i"
      :scroll="{ y: 500, x: 1400 }"
      :columns="columns"
      :data-source="orderList"
      :pagination="pagination"
      bordered
      :loading="tableLoading"
      @change="changeTable"
    >
    ...

注意:不要每列都设置宽度,针对操作一列添加widthfixed:'right'

最终效果:
在这里插入图片描述
完成!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐