【样式问题】Antd Table【表格】实现表头固定时，与内容不对齐问题

目录：

1. 版本说明
2. 问题
3. 问题分析
4. 解决办法

一、版本说明

"ant-design-vue":  "^1.3.5"

二、问题描述如下

2.1、按照官网设置过以下属性值，发现可以滚动，但是与内容错位啦

:scroll="{x: 1200, y: 720}"

三、原因分析：

3.1、查看官方文档，这里，发现文档的提示如下：

若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。
如果指定 width 不生效或出现白色垂直空隙， 请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。

四、解决办法：

4.1、研究一番，主要修改注意点⚠️如下：

1. 设置一个固定值 `scroll.y`  
2. 留一列不设置宽度，用于自适应，其他列都需要设置宽度
3. 保证所有宽度（包含自适应的）加起来，需要小于 `scroll.x`   

4.2、具体内容如下，根据项目实际修改：

<a-table
    :scroll="{x: scrollXWidth, y: 720}"
    bordered
    size="middle"
    rowKey="id"
    :columns="columns"
    ...
    ...
    ...
    >
</a-table>


<script>
    
    ...
    
    data() {
        return {
            scrollXWidth: 1200,
            columns:[]
        }
    },
    ...
    mounted() {
        this.getData();
    },
    methods() {
        // 获取当前表单属性值、数据值等
        getData() {
            ...
            
            let currColumns = res.result.columns
            // res.result.columns表示接口获取的columns值，具体根据接口返回值修改
            
            for(let a=0;a<currColumns.length;a++){
              // 设置除最后一列的宽度，需要空一列自适应
              if(a < currColumns.length-1) {
                currColumns[a].width = 150;
              }
            }
            console.log("-------------------",currColumns)
            // 横向滚动长度大于所有宽度，才能实现固定表头
            this.scrollXWidth = (currColumns.length) * 150 + 180;
            this.columns = [...currColumns]
            
            ...
        }
    }
    
    ...
</script>

4.3、注意⚠：️上述修改后，可能仍有问题，在组件中增加此css样式，具体看是否是这个class属性名

.ant-table-scroll {
    word-break: break-all;
}

写给自己的随笔，有问题欢迎指出