dialogForm 弹窗数据表格

TIP

内部实现是 ElDialog + ProForm 组件

属性

参数	说明	类型	默认值	可选值
v-model（必传）	是否显示 Dialog	Boolean
dialogConfig	弹窗配置	DialogConfig
dialogEvents	弹窗事件	DialogEmits
formConfig（必传）	表单配置	BasicForm
formData（必传）	表单数据（编辑时回显的数据）	Object
create（必传）	表单新增方法(参数 data:表单数据)	Function
update（必传）	表单编辑方法 (参数 data:表单数据)	Function
formSubmit（如果传此参数 create 和 update 就不需要传）	自定义表单提交方法(参数 data:表单数据)	Function

BasicForm

type BasicForm = {
  props?: Partial<FormProps> // 表单属性（element-plus的form属性）
  route?: any // 路由(默认是弹窗方式，如果要打开一个新页面，可以配置此项)
  span?: number // 栅格占位
  disabled?: boolean // 是否禁用
  formItems: BasicFormItem[]
}
type BasicFormItem = {
  label: string // 表单标签
  value: any // 表单值
  name: string // 接口需要的字段名
  type: string // 表单类型
  placeholder?: string
  children?: Array<BasicFormItem>
  options?: Array<any> // 下拉框选项
  search?: boolean // 是否出现在搜索框
  required?: boolean // 是否必填
  rules?: FormItemRule | FormItemRule[] // 表单验证规则
  span?: number // 栅格占位
  props?: object // 组件属性
  events?: object // 组件事件
  request?: Function // 异步请求数据
  slots?: Array<FormSlot> // 自定义插槽
  notFormItem?: boolean // 是否为表单项
  hidden?: boolean // 是否隐藏
  extra?: any // 额外信息
  formItemProps?: object // formItem属性
  formItemSlots?: Array<FormSlot> // formItem插槽
}
type FormSlot = {
  name: string // 插槽名称
  alias: string // 插槽别名
}
type DialogConfig = Partial<DialogProps> & {
  confirmText?: string // 确认按钮文字
  cancelText?: string // 取消按钮文字
  btnExchange?: boolean // 按钮顺序是否交换
  btnIcon?: boolean // 是否显示按钮图标
}

事件

事件名	说明	类型	参数
success	表单提交成功后触发	Function
close	弹窗关闭	Function

Exposes

名称	说明	类型	参数
getForm	获取表单实例	Function
submit	表单提交	Function