Browse Source

wip: Table重构中

kailong321200875 2 years ago
parent
commit
0a273ff8c8
2 changed files with 44 additions and 16 deletions
  1. 16 16
      src/components/Table/src/Table.vue
  2. 28 0
      src/components/Table/src/types/index.ts

+ 16 - 16
src/components/Table/src/Table.vue

@@ -22,7 +22,7 @@ export default defineComponent({
       default: () => []
     },
     // 展开行
-    expand: propTypes.bool.def(false),
+    // expand: propTypes.bool.def(false),
     // 是否展示分页
     pagination: {
       type: Object as PropType<Pagination>,
@@ -168,23 +168,23 @@ export default defineComponent({
       ) : undefined
     }
 
-    const renderTableExpand = () => {
-      const { align, headerAlign, expand } = unref(getProps)
-      // 渲染展开行
-      return expand ? (
-        <ElTableColumn type="expand" align={align} headerAlign={headerAlign}>
-          {{
-            // @ts-ignore
-            default: (data: TableSlotDefault) => getSlot(slots, 'expand', data)
-          }}
-        </ElTableColumn>
-      ) : undefined
-    }
+    // const renderTableExpand = () => {
+    //   const { align, headerAlign, expand } = unref(getProps)
+    //   // 渲染展开行
+    //   return expand ? (
+    //     <ElTableColumn type="expand" align={align} headerAlign={headerAlign}>
+    //       {{
+    //         // @ts-ignore
+    //         default: (data: TableSlotDefault) => getSlot(slots, 'expand', data)
+    //       }}
+    //     </ElTableColumn>
+    //   ) : undefined
+    // }
 
     const renderTreeTableColumn = (columnsChildren: TableColumn[]) => {
       const { align, headerAlign, showOverflowTooltip } = unref(getProps)
       return columnsChildren.map((v) => {
-        const props = { ...v }
+        const props = { ...v } as any
         if (props.children) delete props.children
         return (
           <ElTableColumn
@@ -220,7 +220,7 @@ export default defineComponent({
         headerAlign,
         showOverflowTooltip
       } = unref(getProps)
-      return [...[renderTableExpand()], ...[renderTableSelection()]].concat(
+      return [renderTableSelection()].concat(
         (columnsChildren || columns).map((v) => {
           // 自定生成序号
           if (v.type === 'index') {
@@ -239,7 +239,7 @@ export default defineComponent({
               ></ElTableColumn>
             )
           } else {
-            const props = { ...v }
+            const props = { ...v } as any
             if (props.children) delete props.children
             return (
               <ElTableColumn

+ 28 - 0
src/components/Table/src/types/index.ts

@@ -2,6 +2,34 @@ export interface TableColumn {
   field: string
   label?: string
   children?: TableColumn[]
+  slots?: {
+    defalut?: (...args: any[]) => JSX.Element | null
+    header?: (...args: any[]) => JSX.Element | null
+  }
+  index?: number | ((index: number) => number)
+  columnKey?: string
+  width?: string | number
+  minWidth?: string | number
+  fixed?: boolean | 'left' | 'right'
+  renderHeader?: (...args: any[]) => JSX.Element | null
+  sortable?: boolean | 'custom'
+  sortMethod?: (...args: any[]) => number
+  sortBy?: string | string[] | ((...args: any[]) => string | string[])
+  sortOrders?: (string | null)[]
+  resizable?: boolean
+  formatter?: (...args: any[]) => any
+  showOverflowTooltip?: boolean
+  align?: 'left' | 'center' | 'right'
+  headerAlign?: 'left' | 'center' | 'right'
+  className?: string
+  labelClassName?: string
+  selectable?: (...args: any[]) => boolean
+  reserveSelection?: boolean
+  filters?: Array<{ text: string; value: string }>
+  filterPlacement?: string
+  filterMultiple?: boolean
+  filterMethod?: (...args: any[]) => boolean
+  filteredValue?: string[]
   [key: string]: any
 }