fix(table): fix column default rendering errors (#1433)

When rendering columns by default, default parameters should not be provided. Default parameters
cannot be passed in as props of other components, which will cause other components to report errors

fix #1232

Co-authored-by: winerlu <winerlu@tencent.com>

packages/table/__tests__/table.spec.ts

@@ -2,6 +2,8 @@ import { mount as _mount, VueWrapper } from '@vue/test-utils'
 import { ComponentPublicInstance, nextTick } from 'vue'
 import ElTable from '../src/table.vue'
 import ElTableColumn from '../src/table-column/index'
+import ElCheckboxGroup from '@element-plus/checkbox-group'
+import ElCheckbox from '@element-plus/checkbox'
 import sinon from 'sinon'
 
 const testDataArr = []
@@ -126,6 +128,58 @@ describe('Table.vue', () => {
       wrapper.unmount()
     })
   })
+
+  it('custom template', async () => {
+    const wrapper = mount({
+      components: {
+        ElTable,
+        ElTableColumn,
+        ElCheckboxGroup,
+        ElCheckbox,
+      },
+      template: `
+      <el-table :data="tableData">
+        <el-table-column label="someLabel">
+          <template #default="{ row }">
+            <el-checkbox-group v-model="row.checkList">
+              <el-checkbox label="复选框 A"></el-checkbox>
+              <el-checkbox label="复选框 B"></el-checkbox>
+            </el-checkbox-group>
+          </template>
+        </el-table-column>
+      </el-table>
+      `,
+      data() {
+        return {
+          tableData: [
+            {
+              checkList: [],
+            },
+            {
+              checkList: ['复选框 A'],
+            },
+            {
+              checkList: ['复选框 A', '复选框 B'],
+            },
+          ],
+        }
+      },
+    })
+    const vm = wrapper.vm
+    await nextTick()
+    const checkGroup = vm.$el.querySelectorAll(
+      '.el-table__body-wrapper .el-checkbox-group',
+    )
+    expect(checkGroup.length).toBe(3)
+    const checkbox = vm.$el.querySelectorAll(
+      '.el-table__body-wrapper .el-checkbox',
+    )
+    expect(checkbox.length).toBe(6)
+    const checkSelect = vm.$el.querySelectorAll(
+      '.el-table__body-wrapper label.is-checked',
+    )
+    expect(checkSelect.length).toBe(3)
+  })
   describe('attributes', () => {
     const createTable = function(props, opts?) {
       return mount(

packages/table/src/table-column/index.ts

@@ -7,6 +7,7 @@ import {
   getCurrentInstance,
   h,
   onBeforeUnmount,
+  Fragment,
 } from 'vue'
 import { cellStarts } from '../config'
 import { mergeOptions, compose } from '../util'
@@ -74,10 +75,10 @@ export default defineComponent({
     index: [Number, Function],
     sortOrders: {
       type: Array,
-      default() {
+      default () {
         return ['ascending', 'descending', null]
       },
-      validator(val: unknown[]) {
+      validator (val: unknown[]) {
         return val.every(
           (order: string) =>
             ['ascending', 'descending', null].indexOf(order) > -1,
@@ -85,7 +86,7 @@ export default defineComponent({
       },
     },
   },
-  setup(prop, { slots }) {
+  setup (prop, { slots }) {
     const instance = getCurrentInstance() as TableColumn
     const columnConfig = ref<Partial<TableColumnCtx>>({})
     const props = (prop as unknown) as TableColumnCtx
@@ -117,7 +118,6 @@ export default defineComponent({
     const parent = columnOrTableParent.value
     columnId.value =
       (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++
-
     onBeforeMount(() => {
       isSubColumn.value = owner.value !== parent
 
@@ -187,14 +187,16 @@ export default defineComponent({
       const children = isSubColumn.value
         ? parent.vnode.el.children
         : parent.refs.hiddenColumns?.children
-      const getColumnIndex = () => getColumnElIndex(children || [], instance.vnode.el)
+      const getColumnIndex = () =>
+        getColumnElIndex(children || [], instance.vnode.el)
       columnConfig.value.getColumnIndex = getColumnIndex
       const columnIndex = getColumnIndex()
-      columnIndex > -1 && owner.value.store.commit(
-        'insertColumn',
-        columnConfig.value,
-        isSubColumn.value ? parent.columnConfig.value : null,
-      )
+      columnIndex > -1 &&
+        owner.value.store.commit(
+          'insertColumn',
+          columnConfig.value,
+          isSubColumn.value ? parent.columnConfig.value : null,
+        )
     })
     onBeforeUnmount(() => {
       owner.value.store.commit(
@@ -209,20 +211,22 @@ export default defineComponent({
     instance.columnConfig = columnConfig
     return
   },
-  render() {
+  render () {
+    let children = []
     try {
-      return h(
-        'div',
-        this.$slots.default?.({
-          store: {},
-          _self: {},
-          column: {},
-          row: {},
-          $index: -1,
-        }),
-      )
+      const renderDefault = this.$slots.default?.()
+      if (renderDefault instanceof Array) {
+        for (const childNode of renderDefault) {
+          if (childNode.type?.name === 'ElTableColumn') {
+            children.push(childNode)
+          } else if (childNode.type === Fragment && childNode.children instanceof Array) {
+            renderDefault.push(...childNode.children)
+          }
+        }
+      }
     } catch {
-      return h('div')
+      children = []
     }
+    return h('div', children)
   },
 })