feat: 🎸 初始化项目

src/components/Table/Table.tsx

@@ -0,0 +1,94 @@
+import { defineComponent, PropType, computed } from 'vue'
+import { Table } from 'ant-design-vue'
+
+export default defineComponent({
+  name: 'ComTable',
+  props: {
+    columns: {
+      type: Array as PropType<any[]>,
+      default: () => []
+    }
+  },
+  setup(props, { attrs, slots }) {
+    const getBindValue = computed((): any => {
+      const bindValue = { ...attrs, ...props }
+      delete bindValue.columns
+      return bindValue
+    })
+    
+    function renderTabelItem(columns: any[]) {
+      return columns.map((v: any) => {
+        const vSlots: any = v.slots || {}
+        if (v.children) {
+          const slotData = {
+            title: () => vSlots.title && slots[vSlots.title] && slots[vSlots.title]!(),
+            default: () => {renderTabelItem(v.children)}
+          }
+          if (!vSlots.title) {
+            delete slotData.title
+          }
+          return (
+            <Table.ColumnGroup
+              v-slots={{...slotData}}
+            >
+            </Table.ColumnGroup>
+          )
+        } else {
+          const slotData = {
+            title: () => vSlots.title && slots[vSlots.title] && slots[vSlots.title]!(),
+            default: ({ text, record, index, column }: any) => {
+              if (vSlots.customRender) {
+                return slots[vSlots.customRender] && slots[vSlots.customRender]!({ text, record, index, column })
+              } else {
+                return text
+              }
+            },
+            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, column }: any) => vSlots.filterDropdown && slots[vSlots.filterDropdown] && slots[vSlots.filterDropdown]!({ setSelectedKeys, selectedKeys, confirm, clearFilters, column }),
+            filterIcon: (filtered: any) => vSlots.filterIcon && slots[vSlots.filterIcon] && slots[vSlots.filterIcon]!(filtered)
+            }
+          if (!vSlots.title) {
+            delete slotData.title
+          }
+          if (!vSlots.filterDropdown) {
+            delete slotData.filterDropdown
+          }
+          if (!vSlots.filterIcon) {
+            delete slotData.filterIcon
+          }
+          return (
+            <Table.Column
+              {...v}
+              v-slots={{...slotData}}
+            >
+            </Table.Column>
+          )
+        }
+      })
+    }
+    
+    return () => {
+      const tableSlot = {
+        title: (currentPageData: any) => slots.title && slots.title(currentPageData),
+        footer: (currentPageData: any) => slots.footer && slots.footer(currentPageData),
+        expandedRowRender: ({ record, index, indent, expanded }: any) => slots.expandedRowRender && slots.expandedRowRender({ record, index, indent, expanded }),
+      }
+      if (!slots.title) {
+        delete tableSlot.title
+      }
+      if (!slots.footer) {
+        delete tableSlot.footer
+      }
+      if (!slots.expandedRowRender) {
+        delete tableSlot.expandedRowRender
+      }
+      return (
+        <Table
+          {...(getBindValue as any)}
+          v-slots={tableSlot}
+        >
+          {renderTabelItem(props.columns)}
+        </Table>
+      )
+    }
+  }
+})

src/components/Table/TableItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <template v-if="item.children" />
+  <template v-else>
+    <a-table-column
+      v-bind="getItemBindValue(item)"
+    >
+      <!-- title slot -->
+      <template v-if="item.slots && item.slots.title" #title>
+        <slot :name="item.slots.title" />
+      </template>
+      <!-- default slot -->
+      <template v-if="item.slots && item.slots.customRender" #default="{ text, record, index, column }">
+        <slot :name="item.slots.customRender" :text="text" :record="record" :index="index" :column="column" />
+      </template>
+      <!-- filterDropdown slot -->
+      <template v-if="item.slots && item.slots.filterDropdown" #filterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
+        <slot :name="item.slots.filterDropdown" :setSelectedKeys="setSelectedKeys" :selectedKeys="selectedKeys" :confirm="confirm" :clearFilters="clearFilters" :column="column" />
+      </template>
+      <!-- filterIcon slot -->
+      <template v-if="item.slots && item.slots.filterIcon" #filterIcon="filtered">
+        <slot :name="item.slots.filterIcon" :filtered="filtered" />
+      </template>
+    </a-table-column>
+  </template>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue'
+export default defineComponent({
+  name: 'TableItem',
+  functional: true,
+  props: {
+    item: {
+      type: Object as PropType<object>,
+      required: true
+    }
+  },
+  setup(props, { attrs }) {
+    alert(',,,,')
+    const getItemBindValue = computed(() => {
+      return function(item: any) {
+        return { ...item, ...attrs, ...props }
+      }
+    })
+    return {
+      getItemBindValue
+    }
+  }
+})
+</script>
+
+<style>
+</style>

src/components/Table/index.ts

@@ -0,0 +1,3 @@
+import Table from './Table'
+
+export default Table

src/components/Table/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <a-table v-bind="getBindValue">
+    <table-item
+      v-for="item in columns"
+      :key="item.key || item.dataIndex"
+      :item="item"
+    />
+    <template v-if="slots.title" #title="currentPageData">
+      <slot name="title" :currentPageData="currentPageData" />
+    </template>
+    <!-- <template v-for="item in columns" :key="item.key || item.dataIndex"> -->
+
+    <!-- </template> -->
+    <template v-if="slots.footer" #footer="currentPageData">
+      <slot name="footer" :currentPageData="currentPageData" />
+    </template>
+  </a-table>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue'
+import TableItem from './TableItem.vue'
+export default defineComponent({
+  name: 'ComTable',
+  components: {
+    TableItem
+  },
+  props: {
+    columns: {
+      type: Array as PropType<any[]>,
+      default: () => []
+    }
+  },
+  setup(props, { attrs, slots }) {
+    console.log(TableItem)
+    const getBindValue = computed((): any => {
+      const bindValue = { ...attrs, ...props }
+      delete bindValue.columns
+      return bindValue
+    })
+
+    return {
+      getBindValue,
+      slots
+    }
+  }
+})
+</script>
+
+<style>
+</style>