wip: Table组件重构中

src/components/Table/index.ts

@@ -1,10 +1,18 @@
 import Table from './src/Table.vue'
 import { ElTable } from 'element-plus'
-import { TableSetPropsType } from '@/types/table'
+import { TableSetProps } from './src/types'
+
+export type {
+  TableColumn,
+  TableSlotDefault,
+  Pagination,
+  TableSetProps,
+  TableProps
+} from './src/types'
 
 export interface TableExpose {
   setProps: (props: Recordable) => void
-  setColumn: (columnProps: TableSetPropsType[]) => void
+  setColumn: (columnProps: TableSetProps[]) => void
   selections: Recordable[]
   elTableRef: ComponentRef<typeof ElTable>
 }

src/components/Table/src/Table.vue

@@ -4,9 +4,8 @@ import { defineComponent, PropType, ref, computed, unref, watch, onMounted } fro
 import { propTypes } from '@/utils/propTypes'
 import { setIndex } from './helper'
 import { getSlot } from '@/utils/tsxHelper'
-import type { TableProps } from './types'
+import type { TableProps, TableColumn, TableSlotDefault, Pagination, TableSetProps } from './types'
 import { set } from 'lodash-es'
-import { TableColumn, TableSlotDefault, Pagination, TableSetPropsType } from '../../../types/table'
 
 export default defineComponent({
   name: 'Table',
@@ -78,7 +77,7 @@ export default defineComponent({
       outsideProps.value = props
     }
 
-    const setColumn = (columnProps: TableSetPropsType[], columnsChildren?: TableColumn[]) => {
+    const setColumn = (columnProps: TableSetProps[], columnsChildren?: TableColumn[]) => {
       const { columns } = unref(getProps)
       for (const v of columnsChildren || columns) {
         for (const item of columnProps) {

src/components/Table/src/types/index.ts

@@ -1,4 +1,41 @@
-import { Pagination, TableColumn } from '@/types/table'
+export interface TableColumn {
+  field: string
+  label?: string
+  children?: TableColumn[]
+  [key: string]: any
+}
+
+export interface TableSlotDefault {
+  row: Recordable
+  column: TableColumn
+  $index: number
+  [key: string]: any
+}
+
+export interface Pagination {
+  small?: boolean
+  background?: boolean
+  pageSize?: number
+  defaultPageSize?: number
+  total?: number
+  pageCount?: number
+  pagerCount?: number
+  currentPage?: number
+  defaultCurrentPage?: number
+  layout?: string
+  pageSizes?: number[]
+  popperClass?: string
+  prevText?: string
+  nextText?: string
+  disabled?: boolean
+  hideOnSinglePage?: boolean
+}
+
+export interface TableSetProps {
+  field: string
+  path: string
+  value: any
+}
 
 export interface TableProps {
   pageSize?: number

src/hooks/web/useTable.ts

@@ -1,10 +1,8 @@
-import { Table, TableExpose } from '@/components/Table'
+import { Table, TableExpose, TableProps, TableSetProps } from '@/components/Table'
 import { ElTable, ElMessageBox, ElMessage } from 'element-plus'
 import { ref, reactive, watch, computed, unref, nextTick } from 'vue'
 import { get } from 'lodash-es'
-import type { TableProps } from '@/components/Table/src/types'
 import { useI18n } from '@/hooks/web/useI18n'
-import { TableSetPropsType } from '@/types/table'
 
 const { t } = useI18n()
 
@@ -32,7 +30,7 @@ interface TableObject<T = any> {
   pageSize: number
   currentPage: number
   total: number
-  tableList: T[]
+  list: T[]
   params: any
   loading: boolean
   currentRow: Nullable<T>
@@ -47,7 +45,7 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
     // 总条数
     total: 10,
     // 表格数据
-    tableList: [],
+    list: [],
     // AxiosConfig 配置
     params: {
       ...(config?.defaultParams || {})
@@ -131,7 +129,7 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
         tableObject.loading = false
       })
       if (res) {
-        tableObject.tableList = get(res.data || {}, config?.response.list as string)
+        tableObject.list = get(res.data || {}, config?.response.list as string)
         tableObject.total = get(res.data || {}, config?.response?.total as string) || 0
       }
     },
@@ -139,7 +137,7 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
       const table = await getTable()
       table?.setProps(props)
     },
-    setColumn: async (columnProps: TableSetPropsType[]) => {
+    setColumn: async (columnProps: TableSetProps[]) => {
       const table = await getTable()
       table?.setColumn(columnProps)
     },

src/types/table.ts

@@ -1,36 +0,0 @@
-export type TableColumn = {
-  field: string
-  label?: string
-  children?: TableColumn[]
-} & Recordable
-
-export type TableSlotDefault = {
-  row: Recordable
-  column: TableColumn
-  $index: number
-} & Recordable
-
-export interface Pagination {
-  small?: boolean
-  background?: boolean
-  pageSize?: number
-  defaultPageSize?: number
-  total?: number
-  pageCount?: number
-  pagerCount?: number
-  currentPage?: number
-  defaultCurrentPage?: number
-  layout?: string
-  pageSizes?: number[]
-  popperClass?: string
-  prevText?: string
-  nextText?: string
-  disabled?: boolean
-  hideOnSinglePage?: boolean
-}
-
-export interface TableSetPropsType {
-  field: string
-  path: string
-  value: any
-}

src/views/Components/Table/DefaultTable.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
-import { Table } from '@/components/Table'
+import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
 import { getTableListApi } from '@/api/table'
 import { TableData } from '@/api/table/types'
 import { ref, h } from 'vue'
 import { ElTag, ElButton } from 'element-plus'
-import { TableColumn, TableSlotDefault } from '@/types/table'
 
 interface Params {
   pageIndex?: number
@@ -16,11 +15,6 @@ interface Params {
 const { t } = useI18n()
 
 const columns: TableColumn[] = [
-  {
-    field: 'index',
-    label: t('tableDemo.index'),
-    type: 'index'
-  },
   {
     field: 'title',
     label: t('tableDemo.title')