From 116f5294f72025db8f82fcd1c5b8546779a37f11 Mon Sep 17 00:00:00 2001
From: ioslh <ohislh@gmail.com>
Date: Fri, 21 May 2021 15:54:39 +0800
Subject: [PATCH] fix: v-if patch bug on el-table-column (#1988)

---
 packages/table/__tests__/table.spec.ts        | 41 +++++++++++++++++++
 .../table/src/table-body/render-helper.ts     |  5 ++-
 packages/table/src/table-column/defaults.ts   |  1 +
 packages/table/src/table-column/index.ts      |  2 +
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/packages/table/__tests__/table.spec.ts b/packages/table/__tests__/table.spec.ts
index 7c75a979dd..e6242fbb90 100644
--- a/packages/table/__tests__/table.spec.ts
+++ b/packages/table/__tests__/table.spec.ts
@@ -2313,5 +2313,46 @@ describe('Table.vue', () => {
         'el-table__expand-icon--expanded',
       )
     })
+
+    it('v-if on el-table-column should patch correctly', async done => {
+      wrapper = mount({
+        components: {
+          ElTable,
+          ElTableColumn,
+        },
+        template: `
+          <div>
+            <button @click="hideName">hide name column</button>
+            <el-table :data="testData">
+              <el-table-column key="name" label="片名" v-if="showName">
+                <template #default="{ row }"><span class="name">{{ row.name }}</span></template>
+              </el-table-column>
+              <el-table-column key="release" label="发行日期" >
+                <template #default="{ row }"><span class="release">{{ row.release }}</span></template>
+              </el-table-column>
+            </el-table>
+          </div>
+        `,
+        data() {
+          return {
+            testData: getTestData() as any,
+            showName: true,
+          }
+        },
+        methods: {
+          hideName() {
+            this.showName = false
+          },
+        },
+      })
+      await nextTick()
+      const firstCellSpanBeforeHide = wrapper.find('.el-table__body tr td span')
+      expect(firstCellSpanBeforeHide.classes().includes('name')).toBeTruthy()
+      wrapper.find('button').trigger('click')
+      await nextTick()
+      const firstCellSpanAfterHide = wrapper.find('.el-table__body tr td span')
+      expect(firstCellSpanAfterHide.classes().includes('release')).toBeTruthy()
+      done()
+    })
   })
 })
diff --git a/packages/table/src/table-body/render-helper.ts b/packages/table/src/table-body/render-helper.ts
index f0e428ecba..d610ad3e77 100644
--- a/packages/table/src/table-body/render-helper.ts
+++ b/packages/table/src/table-body/render-helper.ts
@@ -102,13 +102,14 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
             }
           }
         }
-        const key = `${$index},${cellIndex}`
+        const baseKey = `${$index},${cellIndex}`
+        const patchKey = columnData.columnKey || columnData.rawColumnKey || ''
         return h(
           'td',
           {
             style: getCellStyle($index, cellIndex, row, column),
             class: getCellClass($index, cellIndex, row, column),
-            key,
+            key: `${patchKey}${baseKey}`,
             rowspan,
             colspan,
             onMouseenter: $event =>
diff --git a/packages/table/src/table-column/defaults.ts b/packages/table/src/table-column/defaults.ts
index c3e315fc5a..a9510a7935 100644
--- a/packages/table/src/table-column/defaults.ts
+++ b/packages/table/src/table-column/defaults.ts
@@ -30,6 +30,7 @@ interface TableColumnCtx<T> {
   sortBy: string | ((row: T, index: number) => string) | string[]
   resizable: boolean
   columnKey: string
+  rawColumnKey: string
   align: string
   headerAlign: string
   showTooltipWhenOverflow: boolean
diff --git a/packages/table/src/table-column/index.ts b/packages/table/src/table-column/index.ts
index 1e2ee089d6..a1555eb7e2 100644
--- a/packages/table/src/table-column/index.ts
+++ b/packages/table/src/table-column/index.ts
@@ -80,6 +80,8 @@ export default defineComponent({
         sortable: sortable,
         // index 列
         index: props.index,
+        // <el-table-column key="xxx" />
+        rawColumnKey: instance.vnode.key,
       }
 
       const basicProps = [