TMom

外观

表格增删改查 ​

columns.ts ​

  • 表格列配置

继承TableColumn[]，会有更多组件提示

tsx
import type { TableColumn } from '@/components/core/dynamic-table'

export const baseColumns: TableColumn[] = [
  {
    title: 'id',
    dataIndex: 'id',
    width: 60,
    sorter: true,
    hideInTable: true,
    hideInSearch: true,
  },
  {
    title: '编码',
    dataIndex: 'code',
  },
  {
    title: '名称',
    dataIndex: 'name',
  },
  // ... 其他列
]
import type { TableColumn } from '@/components/core/dynamic-table'

export const baseColumns: TableColumn[] = [
  {
    title: 'id',
    dataIndex: 'id',
    width: 60,
    sorter: true,
    hideInTable: true,
    hideInSearch: true,
  },
  {
    title: '编码',
    dataIndex: 'code',
  },
  {
    title: '名称',
    dataIndex: 'name',
  },
  // ... 其他列
]

formSchemas.ts ​

  • 表单配置

继承FormSchema[]，会有更多组件提示

tsx
import type { FormSchema } from '@/components/core/schema-form'

export const formSchemas: FormSchema[] = [
  {
    label: '编码',
    name: 'code',
    component: 'Input',
    required: true,
  },
  {
    label: '名称',
    name: 'name',
    component: 'Input',
    required: true,
  },
  // ... 其他表单项
]
import type { FormSchema } from '@/components/core/schema-form'

export const formSchemas: FormSchema[] = [
  {
    label: '编码',
    name: 'code',
    component: 'Input',
    required: true,
  },
  {
    label: '名称',
    name: 'name',
    component: 'Input',
    required: true,
  },
  // ... 其他表单项
]

index.vue ​

  • 已封装了表格增删改查功能hook，直接使用即可， 具体实现请看useTablePlugin.ts
tsx
  import { baseColumns } from './columns' // 引入表格列
  import { formSchemas } from './formSchemas' // 引入表单配置
 // ...其他代码
  const {
    rowSelection,
    checkRows,
    exportLoading,
    loadData,
    aoaToExcel,
    handleCancelSelect,
    openModal,
    delRowConfirm,
  } = useTablePlugin({ dynamicTableInstance, action, columns: baseColumns, formSchemas })
 // ...其他代码
  import { baseColumns } from './columns' // 引入表格列
  import { formSchemas } from './formSchemas' // 引入表单配置
 // ...其他代码
  const {
    rowSelection,
    checkRows,
    exportLoading,
    loadData,
    aoaToExcel,
    handleCancelSelect,
    openModal,
    delRowConfirm,
  } = useTablePlugin({ dynamicTableInstance, action, columns: baseColumns, formSchemas })
 // ...其他代码