diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 23e9e66..7942d5e 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -6,6 +6,10 @@ export default defineConfig({ lang: 'zh-CN', title: 'Naive Potato UI', themeConfig: { + outline: { + level: [2, 6], + label: '页面导航', + }, nav: [ { text: '指南', link: '/guide/' }, { text: '组件', link: '/components/curd-table' }, diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 747575e..1b98f32 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -15,4 +15,12 @@ .VPNavBar.has-sidebar .content { padding-left: calc(var(--vp-sidebar-width)); } + + h1, + h2, + h3, + h4, + h5 { + margin-top: 4rem; + } } diff --git a/docs/components/curd-table.md b/docs/components/curd-table.md index e6d6195..46a8cc6 100644 --- a/docs/components/curd-table.md +++ b/docs/components/curd-table.md @@ -56,6 +56,139 @@ layoutClass: m-nav-layout ::: +### 表格配置文件 + +`NpCurdTableHeader`,`props.header`的类型,本组件的配置类型 + +#### 基础配置 + +基础部分的配置,`TForm`为列表接口返回的数据类型,`TInfo`为详情接口返回的数据类型 + +- `info`部分指的是在组件中显示的部分,包括表格内的显示,详情的显示; +- `form`部分指的是在组件中编辑的部分,包括表格内的编辑,新增的编辑,详情的编辑以及查询时的form部分; + +:::api + +- *title[string](-):列标题,在表格列头显示 +- *key[ keyof TForm | string](-):列的字段名,用于在查询结果中取值 +- infoRender[(info: TInfo) => VNode | string | number](-):渲染详情的默认方法,渲染详情的时候如果没有单独配置,则使用此方法渲染 +- formRender[(form: TForm) => VNode | string | number](-):渲染表单的默认方法,渲染表单的时候如果没有单独配置,则使用此方法渲染 +- default[any](undefined):默认值,用于新增时的表单默认值 +- defaultConfig[NCurdTableHeaderRenderOptions< TForm, TInfo >](-):当显示和编辑都为同义字段,且显示/编辑的逻辑一样,可以只编辑此配置,后续下面的配置未设置时会使用此配置 +- column[NCurdTableHeaderColumn< TForm, TInfo>](-):表格中显示的配置 +- query[NCurdTableHeaderQuery< TForm >](-):查询时的配置 +- create[NCurdTableHeaderCreate< TForm >](-):新增时的配置 +- edit[NCurdTableHeaderEdit< TForm >](-):编辑时的配置 +- info[NCurdTableHeaderInfo< TInfo >](-):详情时的配置 + +::: + +#### 渲染配置 + +渲染的配置,用于配置当前字段的显示和编辑的逻辑,单个配置在显示和编辑时的渲染方式已经预先配置好,如果需要自定义渲染方式,可以在设置时使用类型`custom`,并在`render`属性中配置自定义渲染方法 + +当前字段类型有(`NCurdTableHeaderType`): + +| 类型 | 说明 | +| ----------- | ------------------------------------------------------------- | +| text | 文本 | +| textarea | 多行文本 | +| password | 密码 | +| number | 数字 | +| select | 下拉框 | +| multSelect | 多选下拉框 | +| asyncSelect | 异步选择(需引入 [AsyncSelect](/components/async-select.html)) | +| radio | 单选框 | +| date | 日期 | +| datetime | 日期时间 | +| time | 时间 | +| upload | 上传 | +| custom | 自定义渲染组件 | + + + +##### 渲染基础配置 + +:::api + +- title[string](-):字段标题,用于表格表头,表单label +- show[boolean](true):是否展示该字段(即使不展示,该字段也会在query,create,edit表单中存在) +- active[(row: TForm, info?: TInfo) => boolean](-):根据数据判断是否在表单中展示该字段,为false时,不会渲染,在最终提交表单时,也不会提交该字段 +- disabled[(row: TForm, info?: TInfo) => boolean](-):根据数据判断是否禁用该字段,为true时,不可编辑 +- type[NCurdTableHeaderRenderType]('text'):字段展示和编辑的类型,用于表单的渲染 +- config[Record](undefined):字段展示和编辑的配置,根据不同的 `type` 配置不同,用于表单的渲染,更多具体配置见下表 +- render[(row: TForm, info?: TInfo) => VNode | string | number](-):字段展示和编辑的自定义渲染方法,当字段 `type` 为 `custom` 时,用于表单的渲染 +- default[any](undefined):默认值,用于新增时的表单默认值 +- required[boolean](false):简单根据是否填写/选择判断是否必填,用于表单的渲染,复杂判断条件使用 `rules` 属性 +- rules[Record[]](undefined):校验规则,当判断规则比较复杂时覆盖 `required` 属性,用于表单的渲染 + +::: + + +##### 渲染类型配置 + +根据[渲染类型](#渲染配置)的不同(`type`),进行相应的配置,下方列出的为 `type` 为特定值时,`config` 的配置 + +###### 字符类型 + +> type 为'text' | 'textarea' | 'password' | 'number' + +::: api + +- prefix[() => VNode](-):前缀,在显示和编辑时会显示在前面,一般用于显示单位 +- suffix[() => VNode](-):后缀,在显示和编辑时会显示在后面,一般用于显示单位,状态或功能按钮 + +::: + +###### 选择类型 + +> type 为'select' | 'multSelect' + +::: api + +- options[Array](-):下拉框的选项,格式参考Naive UI 的 Select - options +- labelField[string]('label'):下拉框选项的label字段名 +- valueField[string]('value'):下拉框选项的value字段名 + +::: + +###### 异步选择类型 + +> type 为'asyncSelect' +> +> 需引入 [AsyncSelect](/components/async-select.html) , config配置参考[AsyncSelect props](/components/async-select.html#api) + +###### 单选类型 + +> type 为'radio' + +同[选择类型](#选择类型) + +###### 日期类型 + +> type 为'date' | 'datetime' + +::: api + +- *format[string](-):日期格式(见[🔗date-fns format 文档](https://date-fns.org/v2.23.0/docs/format)) +- range[boolean](false):是否为范围选择 +- startField[string]('start'):范围选择的开始字段名 +- endField[string]('end'):范围选择的结束字段名 + +::: + +###### 时间类型 + +> type 为'time' + +:::api + +- *format[string](-):时间格式(见[🔗date-fns format 文档](https://date-fns.org/v2.23.0/docs/format)) +- range[boolean](false):是否为范围选择 + +::: + + ### Method | 方法名 | 说明 | 参数 |