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-openform-opened两个回调来监控打开事件
  • 可通过form-closeform-closed两个回调来监控关闭事件

SchemaTable API

SchemaTable Attributes

  • 相关基础属性请查看SchemaTable组件
  • 这里只罗列编辑状态下的属性
名称说明类型默认值必填
can-add是否显示添加数据相关按钮(需同时设置 label-mode 为 false)Booleantrue
can-update是否显示修改数据相关按钮(需同时设置 label-mode 为 false)Booleantrue
can-delete是否显示删除数据相关按钮(需同时设置 label-mode 为 false)Booleantrue
can-delete是否显示查看数据相关按钮(需同时设置 label-mode 为 false)Booleanfalse
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 位置Stringend
form-props详情表单透传属性,详情可查看SchemaForm相关属性内容Object
form-wrap-componen-props详情表单外部包裹组件的透传属性,详情可查看ElDialogElDrawer相关属性内容Object
form-wrap-componen详情表单外部包裹组件Stringdialog

SchemaTable Events

  • 相关基础事件请查看SchemaTable组件

    名称说明类型
    form-open明细组件打开的回调Function
    form-opened明细组件打开动画结束时的回调Function
    form-close明细组件关闭的回调Function
    form-closed明细组件关闭动画结束时的回调Function

SchemaTable Exposes

  • 相关基础方法请查看SchemaTable组件
方法名说明类型

SchemaTable Slots

  • 相关基础插槽请查看SchemaTable组件
插槽名说明