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: `
+
+
+
+
+ {{ row.name }}
+
+
+ {{ row.release }}
+
+
+
+ `,
+ 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(props: Partial>) {
}
}
}
- 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 {
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,
+ //
+ rawColumnKey: instance.vnode.key,
}
const basicProps = [