vue-element-plus-admin

useCrudSchemas

统一生成 Search 、 Form 、 Descriptions 、 Table 组件所需要的数据结构。

由于以上四个组件都需要 Sechema 或者 columns 的字段，如果每个组件都写一遍的话，会造成大量重复代码，所以提供 useCrudSchemas 来进行统一的数据生成。

useCrudSchemas 位于 src/hooks/web/useCrudSchemas.ts

用法

TIP

如果不需要某个字段，如 formSchema 不需要 field 为 index 的字段，可以使用 form: { hidden: true } 进行过滤，其他组件同理。

Search 是基于 Form 进行二次封装的，所以 Search 支持的参数 Form 也都支持。

search 与 form 字段，可以传入 dictName 来获取全局的字典数据，也可以传入 api 来获取接口数据，如果使用 api ，需要主动 return 数据。

如果想看更复杂点的例子，请在线预览

<script setup lang="ts">
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index',
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    }
  },
  {
    field: 'title',
    label: t('tableDemo.title'),
    search: {
      show: true
    },
    form: {
      colProps: {
        span: 24
      }
    },
    detail: {
      span: 24
    }
  },
  {
    field: 'author',
    label: t('tableDemo.author')
  },
  {
    field: 'display_time',
    label: t('tableDemo.displayTime'),
    form: {
      component: 'DatePicker',
      componentProps: {
        type: 'datetime',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    }
  },
  {
    field: 'importance',
    label: t('tableDemo.importance'),
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      return h(
        ElTag,
        {
          type: cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'
        },
        () =>
          cellValue === 1
            ? t('tableDemo.important')
            : cellValue === 2
            ? t('tableDemo.good')
            : t('tableDemo.commonly')
      )
    },
    form: {
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '重要',
            value: 3
          },
          {
            label: '良好',
            value: 2
          },
          {
            label: '一般',
            value: 1
          }
        ]
      }
    }
  },
  {
    field: 'pageviews',
    label: t('tableDemo.pageviews'),
    form: {
      component: 'InputNumber',
      value: 0
    }
  },
  {
    field: 'content',
    label: t('exampleDemo.content'),
    table: {
      hidden: true
    },
    form: {
      component: 'Editor',
      colProps: {
        span: 24
      }
    },
    detail: {
      span: 24
    }
  },
  {
    field: 'action',
    width: '260px',
    label: t('tableDemo.action'),
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)
</script>

参数介绍

const { allSchemas } = useCrudSchemas(crudSchemas)

allSchemas

allSchemas 存放着四个组件所需要的数据结果

allSchemas.fromSchema

Form 组件的 Sechema

allSchemas.searchSchema

Search 组件的 Sechema

allSchemas.detailSchema

Descriptions 组件的 Sechema

allSchemas.tableColumns

Table 组件的 columns

CrudSchema

属性说明类型可选值默认值
search用于设置 searchSchemaCrudSearchParams--
table用于设置 tableColumnsCrudTableParams--
form用于设置 fromSchemaCrudFormParams--
detail用于设置 DescriptionsSchemaCrudDescriptionsParams--
children如果是 Table 组件，则可能会有多表头的情况存在CrudSchema[]--