mirror of
https://gitee.com/newgateway/vtj.git
synced 2026-06-30 23:45:12 +08:00
docs: ✏️ fix docs
This commit is contained in:
“chenhuachun”
@@ -1,40 +1,31 @@
|
||||
# XAction 操作按钮
|
||||
|
||||
|
||||
## 示例
|
||||
|
||||
|
||||
### 基础用法
|
||||
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/action/action-1.vue
|
||||
:::
|
||||
|
||||
|
||||
|
||||
### 提示信息 用法
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/action/action-3.vue
|
||||
:::
|
||||
|
||||
|
||||
### mode: icon 用法
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/action/action-4.vue
|
||||
:::
|
||||
|
||||
|
||||
### 下拉菜单 用法
|
||||
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/action/action-2.vue
|
||||
:::
|
||||
|
||||
|
||||
<!-- ### 拖拽 用法
|
||||
|
||||
|
||||
@@ -50,37 +41,32 @@ demo-preview=../examples/ui/action/action-5.vue
|
||||
demo-preview=../examples/ui/action/action-6.vue
|
||||
::: -->
|
||||
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------------------- | --------------------------------------- | ------- |
|
||||
| name | 动作名称标识 | string | - |
|
||||
| label | 动作标题文本 | boolean | false |
|
||||
| value | 动作值，用来传输数据 | string \| number \| object \| array \| | - |
|
||||
| icon | 图标配置 | string \| object | - |
|
||||
| mode | 模式 | string | button |
|
||||
| menus | 下拉菜单配置 | array | - |
|
||||
| tooltip | tooltip 配置 | string \| object | - |
|
||||
| badge | badge配置 | string \| Number \| Object | - |
|
||||
| dropdown | ElDropdown 组件配置 | object | - |
|
||||
| button | ElButton 组件配置，mode为button时有效 | object | - |
|
||||
| disabled | 禁用 | boolean | - |
|
||||
| size | 尺寸 | string | default |
|
||||
| type | 颜色类型 | string | - |
|
||||
| background | icon 背景设置，当 mode为 icon 时有效 | string ```always, hover, none``` | always |
|
||||
| circle | icon 背景样式圆形，当 mode为 icon 时有效 | string | - |
|
||||
| draggable | 是否可拖拽 | boolean | - |
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------------------- | -------------------------------------- | ------- |
|
||||
| name | 动作名称标识 | string | - |
|
||||
| label | 动作标题文本 | boolean | false |
|
||||
| value | 动作值，用来传输数据 | string \| number \| object \| array \| | - |
|
||||
| icon | 图标配置 | string \| object | - |
|
||||
| mode | 模式 | string | button |
|
||||
| menus | 下拉菜单配置 | array | - |
|
||||
| tooltip | tooltip 配置 | string \| object | - |
|
||||
| badge | badge配置 | string \| Number \| Object | - |
|
||||
| dropdown | ElDropdown 组件配置 | object | - |
|
||||
| button | ElButton 组件配置，mode为button时有效 | object | - |
|
||||
| disabled | 禁用 | boolean | - |
|
||||
| size | 尺寸 | string | default |
|
||||
| type | 颜色类型 | string | - |
|
||||
| background | icon 背景设置，当 mode为 icon 时有效 | string `always, hover, none` | always |
|
||||
| circle | icon 背景样式圆形，当 mode为 icon 时有效 | string | - |
|
||||
| draggable | 是否可拖拽 | boolean | - |
|
||||
|
||||
### 事件
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ------- | ------------------ | ---- |
|
||||
| click | 点击事件 | - |
|
||||
| command | menu菜单项点击事件 | - |
|
||||
| command | menu菜单项点击事件 | - |
|
||||
|
||||
@@ -1,48 +1,40 @@
|
||||
# XActionBar 操作按钮集
|
||||
|
||||
|
||||
## 示例
|
||||
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/actionBar/actionBar-1.vue
|
||||
:::
|
||||
|
||||
|
||||
### mode:icon 效果
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/actionBar/actionBar-2.vue
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------------------- | ---------------------------------- | ------- |
|
||||
| items | 动作项 | array | - |
|
||||
| mode | 模式 | string ```button\|text\|icon``` | - |
|
||||
| size | 尺寸 | string | default |
|
||||
| type | 颜色类型 | string | - |
|
||||
| background | icon 背景设置，当 mode为 icon 时有效 | string ```always\|hover\|none``` | always |
|
||||
| circle | icon 背景样式圆形，当 mode为 icon 时有效 | boolean | - |
|
||||
| disabled | 禁用 | boolean \| () => boolean | - |
|
||||
| tooltip | tooltip 配置 | object | - |
|
||||
| badge | Badge 配置 | object | - |
|
||||
| dropdown | ElDropdown 组件配置 | object | - |
|
||||
| button | ElButton 组件配置，mode为button时有效 | object | - |
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------------------- | ---------------------------- | ------- |
|
||||
| items | 动作项 | array | - |
|
||||
| mode | 模式 | string `button\|text\|icon` | - |
|
||||
| size | 尺寸 | string | default |
|
||||
| type | 颜色类型 | string | - |
|
||||
| background | icon 背景设置，当 mode为 icon 时有效 | string `always\|hover\|none` | always |
|
||||
| circle | icon 背景样式圆形，当 mode为 icon 时有效 | boolean | - |
|
||||
| disabled | 禁用 | boolean \| () => boolean | - |
|
||||
| tooltip | tooltip 配置 | object | - |
|
||||
| badge | Badge 配置 | object | - |
|
||||
| dropdown | ElDropdown 组件配置 | object | - |
|
||||
| button | ElButton 组件配置，mode为button时有效 | object | - |
|
||||
|
||||
### 事件
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ------- | ------------------ | ---- |
|
||||
| click | 点击事件 | - |
|
||||
| command | menu菜单项点击事件 | - |
|
||||
| command | menu菜单项点击事件 | - |
|
||||
|
||||
@@ -1,63 +1,54 @@
|
||||
# XAttachment 附件
|
||||
|
||||
|
||||
## 示例
|
||||
|
||||
|
||||
### 基础用法
|
||||
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/attachment/base.vue
|
||||
:::
|
||||
|
||||
|
||||
### 模式用法
|
||||
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/attachment/attachment-1.vue
|
||||
:::
|
||||
|
||||
|
||||
### 插槽用法
|
||||
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/attachment/attachment-2.vue
|
||||
:::
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------- |
|
||||
| modelValue | 列表显示的文件 | `array` | - |
|
||||
| selectValue | 选中值，开启 selectable 有效 | `object \| array` | - |
|
||||
| uploader | 文件上传方法 | `function` | - |
|
||||
| multiple | 支持多文件上传, 同时在selectable时控制多选 | `boolean` | - |
|
||||
| limit | 允许上传文件的最大数量 | `number` | - |
|
||||
| accept | 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) | `string` | 'image/* ,audio/* ,video/*,.zip,.svg,.pdf,.json,.docx,.xlsx,.pptx,.doc,.xls,.ppt' |
|
||||
| disabled | 禁止更改文件，不能上传和删除 | `boolean` | - |
|
||||
| size | 图片显示尺寸 | `string` | default |
|
||||
| thumbnail | 缩略图生成方法 | `function` | - |
|
||||
| addable | 可增加 | `boolean` | true |
|
||||
| removable | 可删除 | `boolean` | true |
|
||||
| downloadable | 可下载 | `boolean` | true |
|
||||
| previewable | 可预览 | `boolean` | true |
|
||||
| selectable | 可选择 | `boolean` | false |
|
||||
| clickable | 可点击 | `boolean` | false |
|
||||
| listType | 列表类型 | `string<card \| list>` | card |
|
||||
| beforeUpload | 上传前守卫 | `function` | - |
|
||||
| limitSize | 允许上传的文件大写最大值， 支持 K / M | `string` | 10M |
|
||||
| formatter | 格式化 | `function` | - |
|
||||
| valueFormatter | 列表数据格式化 | `function` | - |
|
||||
| previewer | 预览器方法 | `function` | - |
|
||||
| downloader | 下载器方法 | `function` | - |
|
||||
| autoUpload | 是否自动上传文件 | `boolean` | true |
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
|
||||
| modelValue | 列表显示的文件 | `array` | - |
|
||||
| selectValue | 选中值，开启 selectable 有效 | `object \| array` | - |
|
||||
| uploader | 文件上传方法 | `function` | - |
|
||||
| multiple | 支持多文件上传, 同时在selectable时控制多选 | `boolean` | - |
|
||||
| limit | 允许上传文件的最大数量 | `number` | - |
|
||||
| accept | 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) | `string` | 'image/_ ,audio/_ ,video/\*,.zip,.svg,.pdf,.json,.docx,.xlsx,.pptx,.doc,.xls,.ppt' |
|
||||
| disabled | 禁止更改文件，不能上传和删除 | `boolean` | - |
|
||||
| size | 图片显示尺寸 | `string` | default |
|
||||
| thumbnail | 缩略图生成方法 | `function` | - |
|
||||
| addable | 可增加 | `boolean` | true |
|
||||
| removable | 可删除 | `boolean` | true |
|
||||
| downloadable | 可下载 | `boolean` | true |
|
||||
| previewable | 可预览 | `boolean` | true |
|
||||
| selectable | 可选择 | `boolean` | false |
|
||||
| clickable | 可点击 | `boolean` | false |
|
||||
| listType | 列表类型 | `string<card \| list>` | card |
|
||||
| beforeUpload | 上传前守卫 | `function` | - |
|
||||
| limitSize | 允许上传的文件大写最大值， 支持 K / M | `string` | 10M |
|
||||
| formatter | 格式化 | `function` | - |
|
||||
| valueFormatter | 列表数据格式化 | `function` | - |
|
||||
| previewer | 预览器方法 | `function` | - |
|
||||
| downloader | 下载器方法 | `function` | - |
|
||||
| autoUpload | 是否自动上传文件 | `boolean` | true |
|
||||
|
||||
### 事件
|
||||
|
||||
@@ -70,10 +61,8 @@ demo-preview=../examples/ui/attachment/attachment-2.vue
|
||||
| download | 下载 | - |
|
||||
| preview | 预览 | - |
|
||||
|
||||
|
||||
|
||||
### 插槽
|
||||
|
||||
| 插槽名 | 说明 | 类型 |
|
||||
| ------ | -------- | ---- |
|
||||
| tip | 提示信息 | - |
|
||||
| tip | 提示信息 | - |
|
||||
|
||||
@@ -1,72 +1,60 @@
|
||||
# XContainer 容器
|
||||
|
||||
|
||||
## 示例
|
||||
|
||||
|
||||
### 基础用法
|
||||
|
||||
XContainer 容器 的基本用法
|
||||
XContainer 容器 的基本用法
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/container/container-1.vue
|
||||
:::
|
||||
|
||||
### 定义 组件渲染html标签:span、 尺寸 、overflow:hidden
|
||||
|
||||
### 定义 组件渲染html标签:span、 尺寸 、overflow:hidden
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/container/container-2.vue
|
||||
:::
|
||||
|
||||
|
||||
### 定义 Flex 布局
|
||||
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/container/container-3.vue
|
||||
:::
|
||||
|
||||
### 定义 放大 缩小
|
||||
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/container/container-4.vue
|
||||
:::
|
||||
|
||||
|
||||
### 全部用法
|
||||
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/container/container-5.vue
|
||||
:::
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | --------------------------------------------------------------------------------------- | ---------------- | ---------- |
|
||||
| tag | 组件渲染html标签 | string | div |
|
||||
| fit | 宽高自适应 | boolean | false |
|
||||
| width | 指定高度，fit 为true 失效 | string \| number | - |
|
||||
| height | 指定高度，fit 为true失效 | string \| number | - |
|
||||
| flex | 开启flex布局 | boolean | - |
|
||||
| inline | inline-flex | boolean | - |
|
||||
| direction | flex主轴方向 | string | row |
|
||||
| wrap | 换行 | string | nowrap |
|
||||
| justify | 主轴上的对齐方式 | string | flex-start |
|
||||
| align | 交叉轴上对齐方式 | string | flex-start |
|
||||
| alignContent | 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用.(即 ```flex-wrap="nowrap"```) | string | stretch |
|
||||
| grow | 放大 | boolean | false |
|
||||
| shrink | 缩小 | boolean | false |
|
||||
| alignSelf | 单个项目有与其他项目不一样的对齐方式。可覆盖容器的align-items属性 | string | auto |
|
||||
| overflow | css overflow | string | - |
|
||||
| padding | 内边距 | boolean | false |
|
||||
| gap | 嵌套子组件加间隔 | boolean | - |
|
||||
| autoPointer | cursor-pointer | boolean | - |
|
||||
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | ---------------------------------------------------------------------------------- | ---------------- | ---------- |
|
||||
| tag | 组件渲染html标签 | string | div |
|
||||
| fit | 宽高自适应 | boolean | false |
|
||||
| width | 指定高度，fit 为true 失效 | string \| number | - |
|
||||
| height | 指定高度，fit 为true失效 | string \| number | - |
|
||||
| flex | 开启flex布局 | boolean | - |
|
||||
| inline | inline-flex | boolean | - |
|
||||
| direction | flex主轴方向 | string | row |
|
||||
| wrap | 换行 | string | nowrap |
|
||||
| justify | 主轴上的对齐方式 | string | flex-start |
|
||||
| align | 交叉轴上对齐方式 | string | flex-start |
|
||||
| alignContent | 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用.(即 `flex-wrap="nowrap"`) | string | stretch |
|
||||
| grow | 放大 | boolean | false |
|
||||
| shrink | 缩小 | boolean | false |
|
||||
| alignSelf | 单个项目有与其他项目不一样的对齐方式。可覆盖容器的align-items属性 | string | auto |
|
||||
| overflow | css overflow | string | - |
|
||||
| padding | 内边距 | boolean | false |
|
||||
| gap | 嵌套子组件加间隔 | boolean | - |
|
||||
| autoPointer | cursor-pointer | boolean | - |
|
||||
|
||||
@@ -1,40 +1,28 @@
|
||||
# XDataItem 数据项
|
||||
|
||||
|
||||
## 示例
|
||||
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/dataItem/base.vue
|
||||
:::
|
||||
|
||||
|
||||
### 排列展示
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/dataItem/dataItem-1.vue
|
||||
:::
|
||||
|
||||
|
||||
### 插槽展示
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/dataItem/dataItem-2.vue
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | --------------------- | --------------------------- | ------------------------------------------ |
|
||||
@@ -51,8 +39,6 @@ demo-preview=../examples/ui/dataItem/dataItem-2.vue
|
||||
| onImageClick | 点击图片 | `function` | - |
|
||||
| onTitleClick | 点击标题 | `function` | - |
|
||||
|
||||
|
||||
|
||||
### 事件
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
@@ -62,8 +48,6 @@ demo-preview=../examples/ui/dataItem/dataItem-2.vue
|
||||
| actionClick | 点击图标 | (action) |
|
||||
| actionCommand | 点击图标 | (action,menu) |
|
||||
|
||||
|
||||
|
||||
### 插槽
|
||||
|
||||
| 插槽名 | 说明 | 类型 |
|
||||
@@ -73,6 +57,3 @@ demo-preview=../examples/ui/dataItem/dataItem-2.vue
|
||||
| title | - | - |
|
||||
| description | - |
|
||||
| actions | - | - |
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -44,7 +44,6 @@ demo-preview=../examples/ui/dialog/dialog-2.vue
|
||||
| bodyPadding | 显示内容区域的内边距 | `boolean` | `true` |
|
||||
| primary | 标题背景颜色 | `boolean` | - |
|
||||
|
||||
|
||||
#### 接收 XPanel 所有参数
|
||||
|
||||
### 事件
|
||||
@@ -68,10 +67,6 @@ demo-preview=../examples/ui/dialog/dialog-2.vue
|
||||
| `submit` | Dialog 点击确认按钮的回 | - |
|
||||
| `cancel` | Dialog 点击取消按钮的回 | - |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 暴露
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
@@ -88,9 +83,8 @@ demo-preview=../examples/ui/dialog/dialog-2.vue
|
||||
| cancel- | Dialog 点击取消按钮的回调 | - |
|
||||
| close | Dialog 关闭的回调 | - |
|
||||
|
||||
|
||||
|
||||
#### state 参数说明
|
||||
|
||||
| 参数 | 类型 |
|
||||
| ------------- | ----------------------------------------------- |
|
||||
| mode | string <`normal` \| `maximized` \| `minimized`> |
|
||||
@@ -103,6 +97,3 @@ demo-preview=../examples/ui/dialog/dialog-2.vue
|
||||
| zIndex | number |
|
||||
| dragging | boolean |
|
||||
| resizing | boolean |
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,68 +1,54 @@
|
||||
# XDialogForm 弹窗表单
|
||||
|
||||
|
||||
## 示例
|
||||
# XDialogForm 对话框表单
|
||||
|
||||
## 示例用法
|
||||
|
||||
### 基础用法
|
||||
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/dialogForm/dialogForm-1.vue
|
||||
:::
|
||||
|
||||
|
||||
|
||||
### 插槽用法
|
||||
|
||||
|
||||
:::preview
|
||||
demo-preview=../examples/ui/dialogForm/dialogForm-2.vue
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | -------------------------------------- | ------------------ | ------- |
|
||||
| modelValue | 控制弹窗显示或隐藏 | `boolean` | false |
|
||||
| size | 控制头部和尾部的尺寸 | `string` | default |
|
||||
| primary | 弹窗主题颜色 | `boolean` | false |
|
||||
| formProps | - | `object` | - |
|
||||
| submit | 确认按钮 | `boolean\| string` | `确认` |
|
||||
| cancel | 取消按钮 | `boolean\| string` | `取消` |
|
||||
| model | 表单模型 | `object` | {} |
|
||||
| rules | 表单校验规则 | `object` | {} |
|
||||
| submitMethod | 表单提交处理方法, return true 关闭弹窗 | `function` | - |
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | -------------------------------------- | ------------------ | --------- |
|
||||
| modelValue | 控制对话框显示状态 | `boolean` | `false` |
|
||||
| size | 对话框尺寸（small, default, large） | `string` | `default` |
|
||||
| primary | 是否使用主色调标题背景 | `boolean` | `false` |
|
||||
| formProps | 传递给内部表单组件的属性 | `object` | - |
|
||||
| submit | 确认按钮配置 | `boolean\| string` | `确认` |
|
||||
| cancel | 取消按钮配置 | `boolean\| string` | `取消` |
|
||||
| model | 表单数据模型 | `object` | `{}` |
|
||||
| rules | 表单验证规则 | `object` | `{}` |
|
||||
| submitMethod | 表单提交处理方法（返回true关闭对话框） | `function` | - |
|
||||
|
||||
### 事件
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ------ | ---------------- | ---- |
|
||||
| submit | 点击确认按钮触发 | - |
|
||||
| close | 点击取消按钮触发 |
|
||||
|
||||
|
||||
| 事件名称 | 说明 | 参数 |
|
||||
| -------- | ---------------- | ---- |
|
||||
| submit | 确认按钮点击事件 | - |
|
||||
| close | 取消按钮点击事件 | - |
|
||||
|
||||
### 插槽
|
||||
|
||||
| 插槽名 | 说明 | 类型 |
|
||||
| ------ | ------------ | ---- |
|
||||
| extra | - | - |
|
||||
| extra | 额外内容区域 | - |
|
||||
| handle | 底部按钮区域 | - |
|
||||
| footer | - | - |
|
||||
| footer | 整个底部区域 | - |
|
||||
|
||||
### 暴露API
|
||||
|
||||
|
||||
### 暴露
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| --------- | --------------------- | ---- |
|
||||
| $vtjEl | 组件父元素的ref |
|
||||
| formRef | 组件内部form表单的ref |
|
||||
| dialogRef | 弹窗表单组件的ref |
|
||||
| 名称 | 说明 | 类型 |
|
||||
| --------- | -------------------- | ---- |
|
||||
| $vtjEl | 组件父元素实例引用 | - |
|
||||
| formRef | 内部表单组件实例引用 | - |
|
||||
| dialogRef | 对话框组件实例引用 | - |
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
# XDialogGrid 弹窗表格
|
||||
|
||||
|
||||
## 示例
|
||||
# XDialogGrid 对话框表格
|
||||
|
||||
## 示例用法
|
||||
|
||||
### 基础用法
|
||||
|
||||
@@ -10,27 +8,28 @@
|
||||
demo-preview=../examples/ui/dialogGrid/base.vue
|
||||
:::
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
### 属性
|
||||
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ----------------------------------- | ----------------------- | ------ |
|
||||
| columns | 表格列配置 | `array` | - |
|
||||
| model | 表格数据 | `any` | - |
|
||||
| formatter | model数据转换为表格数据 | `(model: any) => any[]` | - |
|
||||
| valueFormatter | 表格数据转换为model数据 | `(rows: any) => any` | - |
|
||||
| rules | 表格验证规则 | - | - |
|
||||
| plus | 显示增行按钮 | `boolean` | - |
|
||||
| minus | 显示删行按钮 | `boolean` | - |
|
||||
| gridProps | 表格其他配置 | - | - |
|
||||
| submitMethod | 表单提交方法， return true 关闭弹窗 | `function` | - |
|
||||
|
||||
#### 接收 XPanel 所有参数
|
||||
| 属性名 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | --------------------------------------- | ----------------------- | ------ |
|
||||
| columns | 表格列配置 | `array` | - |
|
||||
| model | 表格数据模型 | `any` | - |
|
||||
| formatter | 数据格式化函数（模型数据→表格数据） | `(model: any) => any[]` | - |
|
||||
| valueFormatter | 反向数据格式化函数（表格数据→模型数据） | `(rows: any) => any` | - |
|
||||
| rules | 表格数据验证规则 | `object` | - |
|
||||
| plus | 是否显示添加行按钮 | `boolean` | `true` |
|
||||
| minus | 是否显示删除行按钮 | `boolean` | `true` |
|
||||
| gridProps | 传递给内部表格组件的属性 | `object` | - |
|
||||
| submitMethod | 表单提交方法（返回true关闭对话框） | `function` | - |
|
||||
|
||||
### 插槽
|
||||
|
||||
| 插槽名 | 说明 | 类型 |
|
||||
| --------- | ---- | ---- |
|
||||
| valueCell | - | - |
|
||||
| 插槽名 | 说明 | 类型 |
|
||||
| --------- | ---------------- | ---- |
|
||||
| valueCell | 自定义单元格内容 | - |
|
||||
|
||||
### 备注
|
||||
|
||||
- 该组件继承所有 XPanel 组件的属性
|
||||
|
||||
Reference in New Issue
Block a user