fix: v-if patch bug on el-table-column (#1988)

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()
+    })
   })
 })

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 =>

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

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 = [