【樣式問題】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 = 180;
              }
            }
            console.log("-------------------",currColumns)
            // 橫向滾動長度大於所有寬度，才能實現固定表頭
            this.scrollXWidth = (currColumns.length) * 180 + 20;
            this.columns = [...currColumns]
            
            ...
        }
    }
    
    ...
</script>

寫給自己的隨筆，有問題歡迎指出