AntDesign Table bug排查

2025-01-06

background：接手了一個老的vue2項目，主要是fix一下管理端的bug

原始代碼：

            <a-table
            :columns="memberLevelColumns"
            :dataSource="memberLevelConfigs"
            :pagination="false"
            :scroll="{ x: 1000 }"
            :loading="memberLoading"
            >

然後每行後面有個刪除按鈕，意思就是刪除當前行，是通過一個levelDesc來確定刪除某一行

    removeMemberLevelConfigs (memberLevelDesc) {
      const result = this.memberLevelConfigs.filter((item) => item.memberLevelDesc !== memberLevelDesc)
      this.memberLevelConfigs = result
    },

bug description：儅有三行數據及以上，且刪除的不是最後一行時，然後再添加一行。當鼠標移動到最後兩行的其中一行時，就會出現倒數第一行和倒數第二行都會變成焦點，會觸發:hover設置的東西。但是在這裏不會影響到任何實際數據和其他操作，只是感官上會有問題。

expected result：

排查過程：一開始以爲是刪除時重新綁定數據有問題或者綁定數據后渲染有問題，然後把刪除方法修改后還是不行。

去看文檔發現<a-table> 中有個row-key參數，是用來確定某一行的唯一值，如果不是唯一則在瀏覽器會有報錯提示。

現在的代碼沒有設置row-key，所以是vue自己綁定的，就會出現刪除后再新增時row-key有問題。

可以看得出來row-key 實際上就是綁定行數index，刪除時index-1，而row-key并不會更新。

reproduce：

index	row-key	data
0	0	a
1	1	b
2	2	c

儅刪除第二行后，（行數）index會減一變成1，row-key依然是綁定為2

index	row-key	data
0	0	a
1	2	c

此時再新增一行數據，這時候row-key就有重複的了，就會被黨成同一行。現在這種情況對於業務來説是可以接受的，畢竟沒有用到row-key來確定數據，不會造成髒數據或者操作失敗，只是在框架層面用到row-key時就會出現意料之外的效果😂。

index	row-key	data
0	0	a
1	2	c
2	2	d

fix：在<a-table>中加上row-key參數，至於綁定哪個數據不重要，確保唯一就行。

finally：其實在vue規範中是有説明for循環中必須有key的，對於表格來説肯定是有循環存在的，這次是框架層面用到這個循環，而實際業務沒有用到循環，所以忽略掉了key，亦或者說之前開發水平/規範沒有現在好？

keep real

AntDesign Table bug排查