【Vue3】如何手写一个可以自定义列的表格table组件

先写一个简单的表格，功能只有传递column和tableData数据。怎么写可以参考一下其他大佬的大佬，思路就是：
写一个类似于vuex的store，存储从table传递过去的tableData和table-column传递过去的column数据。
然后在将table组件分为table-header和table-body两个组件分开处理（这样逻辑比较清晰）
那怎么手写一个类似于element-plus的可自定义列模板的table组件呢。
首先，复习一下vue3中关于slot的知识点：点击复习
首先在table-column组件setup中获得slots信息，将获得的slots信息传递到定义的store组件中

      let columnConfig = reactive({
        label: props.label,
        prop: props.prop,
        width: props.width,
        isFixed: props.fixed,
        type: props.type,
      })
      if (slots.default) {
        columnConfig.SlotColumn = slots
      }
      const instance = getCurrentInstance()
      instance.parent.ctx.store.commit('insertColumn', columnConfig)

然后在table-body中运用这个信息

      <tr v-for="(item,preindex) in tableData" :key="preindex">
        <td v-for="(column,index) in columns" :key="index"
          <div v-if="!column.SlotColumn">
            {{item[column.prop]}}
          </div>
          <div v-else>
            <component :is="renderSlotColumn(column,item,preindex)"></component>
          </div>
        </td>
      </tr>

//import { h } from 'vue';
 setup() {
      function renderSlotColumn(column, item, preIndex) {
        const scope = {
          row: item,
          index: preIndex
        }
        const SlotNode = h('div', column.SlotColumn.default(scope))
        return SlotNode
      }
      return {
        renderSlotColumn
      }
    }

将数据从slots.default()作为参数穿进去以后，就可以从父组件中访问到传进去的数据了。