SchemaTable
此组件与SchemaTable
的属性、事件等内容一致,本页面内容是与编辑状态下的相关 Demo 演示
基础用法
新增&修改之前格式化数据
- 可通过
before-add-row
方法来返回一个对象来直接初始化详情表单中的值 - 可通过
before-update-row
方法来返回一个对象来直接修改详情表单中的值
详情表单校验
- 可通过
schema.required
中添加必填校验字段 - 可通过
form-rules
来自定义校验内容
自定义插槽
- 插槽可通过字段名来自定义
- 插槽分为两种模式,一种为编辑模式
scope.status === 'edit'
另外一种为默认显示模式scope.status === 'default'
- 插槽中可从
scope.data
中获取数据 - 需要注意的是:插槽内容中如有多个 Dom 内容,需用 Div 包裹一层
详情表单保存回调
- 可通过
form-save
方法来获取用户操作的数据,并返回一个 Promise 对象来告知可处理或者处理成功
控制相关按钮
- 可通过
can-add
来控制是否显示新增数据
按钮 - 可通过
can-update
来控制是否显示修改
按钮 - 可通过
can-delete
来控制是否显示删除
按钮 - 可通过
can-view
来控制是否显示查看
按钮 - 可通过
can-update-row
的行级别控制是否显示修改
按钮 - 可通过
can-delete-row
的行级别控制是否显示删除
按钮 - 可通过
can-view-row
的行级别控制是否显示查看
按钮
详情表单展示载体与透传属性
- 可通过
form-wrap-component
属性修改详情表单的展示载体为drawer
(默认为dialog
) - 可通过
form-wrap-component-props
属性来透传底层组件的相关属性 - 可通过
form-props
属性来透传至详情表单属性
SchemaUi 相关
- 可通过
schema-ui
属性来控制表单项的相关 UI 操作
详情表单打开&关闭事件
- 可通过
form-open
与form-opened
两个回调来监控打开事件 - 可通过
form-close
与form-closed
两个回调来监控关闭事件
SchemaTable API
SchemaTable Attributes
- 相关基础属性请查看
SchemaTable
组件 - 这里只罗列编辑状态下的属性
名称 | 说明 | 类型 | 默认值 | 必填 |
---|---|---|---|---|
can-add | 是否显示添加 数据相关按钮(需同时设置 label-mode 为 false) | Boolean | true | 否 |
can-update | 是否显示修改 数据相关按钮(需同时设置 label-mode 为 false) | Boolean | true | 否 |
can-delete | 是否显示删除 数据相关按钮(需同时设置 label-mode 为 false) | Boolean | true | 否 |
can-delete | 是否显示查看 数据相关按钮(需同时设置 label-mode 为 false) | Boolean | false | 否 |
can-update-row | 通过行级别 控制是否显示修改 数据相关按钮(需同时设置 label-mode 为 false)--需返回 Boolean 告知 | Function | — | 否 |
can-delete-row | 通过行级别 控制是否显示删除 数据相关按钮(需同时设置 label-mode 为 false)--需返回 Boolean 告知 | Function | — | 否 |
can-view-row | 通过行级别 控制是否显示查看 数据相关按钮(需同时设置 label-mode 为 false)--需返回 Boolean 告知 | Function | — | 否 |
before-add-row | 添加一行按钮点击时的回调函数,用于对添加数据进行默认值设定 | Function | — | 否 |
before-update-row | 编辑一行按钮点击时的回调函数,用于对编辑数据进行默认值设定 | Function | — | 否 |
form-save | 用户操作数据之后的回调,需返回 Promise 对象告知是否处理完成 | Function | — | 否 |
form-rules | 表单项验证规则 | Object | — | 否 |
data-add-position | 数据成功添加到表格的 d 位置 | String | end | 否 |
form-props | 详情表单透传属性,详情可查看SchemaForm 相关属性内容 | Object | — | 否 |
form-wrap-componen-props | 详情表单外部包裹组件的透传属性,详情可查看ElDialog 或ElDrawer 相关属性内容 | Object | — | 否 |
form-wrap-componen | 详情表单外部包裹组件 | String | dialog | 否 |
SchemaTable Events
相关基础事件请查看
SchemaTable
组件名称 说明 类型 form-open 明细组件打开的回调 Function
form-opened 明细组件打开动画结束时的回调 Function
form-close 明细组件关闭的回调 Function
form-closed 明细组件关闭动画结束时的回调 Function
SchemaTable Exposes
- 相关基础方法请查看
SchemaTable
组件
方法名 | 说明 | 类型 |
---|
SchemaTable Slots
- 相关基础插槽请查看
SchemaTable
组件
插槽名 | 说明 |
---|