安装

npm i @fcurd/antdv

yarn add @fcurd/antdv

pnpm i @fcurd/antdv

使用

curd 参数配置

使用 FCurd 组件需要传递一个 curd 对象，推荐使用 @fcurd/request

如需自定义，curd 对象需要包含以下属性：

const curd = {
  getList: (params: Record<string, any>) => Promise.resolve([]),
  getItem: () => Promise.resolve({}),
  update: (data: any) => {},
  create: (data: any) => {},
  delete: (params: Record<string, any>) => {},
  restore: (params: Record<string, any>) => {},
}

Columns 配置

除了 ant-design-vue 的 Columns 配置，我们额外提供了以下配置：

const columns: FTableColumn[] = [{
  search: true, // 是否支持搜索，默认 false
  form: {
    // 配置表单组件
    type: 'input', // 表单控件类型，下面会提到支持的表单控件
    "[key: type]": {
      // ...
      // 对应控件类型的配置
    },
    formItem: {
      // FormItem 的配置
    }
  },
  customHeaderRender: (data: { column: FTableColumn, title: string }) => {
    // 支持返回 JSX
    // return <div>{title}</div>
    // 支持返回 VNode
    // return h('div', {}, title)
    // 支持返回文本
    // title
  },
}]

若需要添加操作栏，则需要将 column 的 dataIndex 或 key 设置为 actions

支持的表单控件类型

• calendar
• checkbox
• date
• datetime
• input
• input-number
• month
• rate
• select
• slider
• switch
• time
• upload
• week

插槽

<script setup lang="ts">
  import { FCurd, type FTableColumn } from '@fcurd/antdv'

  const columns: FTableColumn[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      search: true,
      form: {
        type: 'input',
      },
    }, {
      title: 'Name',
      dataIndex: 'name',
      search: true,
      form: {
        type: 'input',
      },
      customHeaderRender: (data: { column: any }) => {
        return h('span', { style: { color: 'red' } }, data.column.title)
      },
      customRender: ({ text }) => {
        return h('span', { style: { color: 'red' } }, text)
      },
    },
  ]

</script>

<template>
  <f-curd>
    <template #beforeAdd>在添加按钮前插入内容</template>
    <template #afterAdd>在添加按钮后插入内容</template>
    <template #beforeActions>在表格操作按钮前插入内容</template>
    <template #afterActions>在表格操作按钮后插入内容</template>
  </f-curd>
</template>