TuiPlus基础组件文档

Appearance

On this page

TModuleForm 模块表单/详情组件 ​

表单-基本使用 ​

表单-模块插槽使用 ​

表单-模块是否展开 ​

表单-对齐方式 ​

表单-表单验证 ​

表单-校验错误提示 ​

表单-自定义底部按钮 ​

表单-显示tabs ​

表单-自定义返回事件 ​

表单-没有返回icon ​

表单-Title右侧插槽使用 ​

表单-模块Title右侧插槽使用 ​

表单-不显示header ​

详情-基本使用 ​

详情-span设置 ​

详情-提示项 ​

详情-模块插槽使用 ​

详情-value插槽使用 ​

详情-模块禁止收缩 ​

详情-模块Title右侧插槽使用 ​

TModuleForm Attributes ​

1、简介：基于 TForm 表单组件及 TDetail 详情组件的再次封装，使页面可以分模块的方式（可以收缩）展示 form 表单或者详情页面 ​

TModuleForm 模块表单/详情组件代码示例：

html
<!-- 第一种 表单形式 -->
<t-module-form
  title="模块表单组件运用"
  ref="sourceForm"
  :formOpts="formOpts"
  :submit="submit"
/>
<!-- 第二种详情展示 根据handleType-->
<t-module-form
  title="模块详情组件运用"
  ref="sourceDetail"
  handleType="desc"
  :descData="descData"
/>
<!-- 第一种 表单形式 -->
<t-module-form
  title="模块表单组件运用"
  ref="sourceForm"
  :formOpts="formOpts"
  :submit="submit"
/>
<!-- 第二种详情展示 根据handleType-->
<t-module-form
  title="模块详情组件运用"
  ref="sourceDetail"
  handleType="desc"
  :descData="descData"
/>

2、配置参数（Attributes）继承 t-form/t-detail Attributes ​

参数说明类型默认值
title头部返回按钮标题string无
titleSlot是否使用插槽显示 titleBooleanfalse
subTitle头部副标题string无
extra操作区，位于 title 行的行尾(右侧)slot无
footer底部操作区（默认展示“取消/保存”按钮；使用插槽则隐藏）footer="null"时隐藏底部操作String slot无
isShowHeader不显示headerBooleanfalse
isTabMargintabs是否跟模块分离Booleanfalse
tabMarginNumtabs跟模块分离距离Number10
tabs页面展示是否需要页签（并且 tabs 的 key 是插槽）——只显示在最后一个模块下Array无
btnTxt表单模块-'保存按钮文字'string'保存'
titleBold模块Title文字是否加粗Booleanfalse
isShowBackheader不显示返回iconBooleanfalse
isGoBackEvent点击头部返回（默认返回上一页，设置此值可以自定义 back 事件）Booleanfalse
handleType显示方式（'edit':form 表单操作，'desc':表详情页面）stringedit
----edithandleType=edit 表 form 表单操作的属性--
------formOpts表单配置描述，支持多分组表单Object无
------submit点击保存时返回所有表单数据（数据格式 promise 且可显示 loading 状态）function所有表单数据
-----deschandleType=desc 表详情页面的属性--
------descColumn详情页面展示每行显示几列（handleType= desc 生效）Number4
------descData详情页面配置描述，支持多分组表 （handleType= desc 生效）Object无

2-1、formOpts 配置参数 ​

参数说明类型默认值
title表单标题(是否显示控制折叠面板功能)String无
slotName插槽(自定义表单数据)有插槽就无需配置 optsslot无
name每组表单定义的名字（作用：是否默认展开）String无
widthSize每行显示几个输入项（默认两项） 最大值 4Number3
disabled禁用时取消收缩功能及隐藏 icon）Booleanfalse
opts表单配置项Object无

2-1-1、opts 配置参数 ​

参数说明类型默认值
rules规则（可依据 element-plus el-form 配置————对应 formData 的值）Object/Array-
operatorList操作按钮 listArray-
listTypeInfo下拉选择数据源（type:'select'有效）Object-
labelPosition改变表单项 label 与输入框的布局方式(默认：right) /topStringright
labelWidthlabel 宽度(默认值 120px)String120px
formData表单提交数据(对应 fieldList 每一项的 value 值)Object-
fieldListform 表单每项 listArray-
----slotName自定义表单某一项输入框slot-
----compform 表单每一项组件是输入框还是下拉选择等（可使用第三方 UI 如 el-select/el-input 也可以使用自定义组件）String-
----bind表单每一项属性（继承第三方 UI 的 Attributes，如 el-input 中的 clearable 清空功能）默认清空及下拉过滤Object-
----typeform 表单每一项类型String-
----widthSizeform 表单某一项所占比例(如果一行展示可以设值：1)Number2
----widthform 表单某一项所占实际宽度String-
----arrLabeltype=select-arr 时，每个下拉显示的中文Stringlabel
----arrKeytype=select-arr 时，每个下拉显示的中文传后台的数字Stringkey
----labelform 表单每一项 titleString-
----labelRender自定义某一项 titlefunction-
----valueform 表单每一项传给后台的参数String-
----rules每一项输入框的表单校验规则Object/Array-
----list下拉选择数据源（仅仅对 type:'select'有效）String-
----event表单每一项事件标志（handleEvent 事件）String-

2-2、descData 配置参数 ​

参数说明类型默认值
title详情标题(是否显示控制折叠面板功能)String-
slotName插槽(自定义详情数据)有插槽就无需配置 dataslot-
name每组详情定义的名字（作用：是否默认展开）String-
disabled禁用时取消收缩功能及隐藏 icon）Booleanfalse
data详情配置项Object-
----label详情字段说明标题String-
----value详情字段返回值String-
----slotName插槽（自定义 value）slot-
----span占用的列宽，默认占用 1 列，最多 4 列Number1
----tooltipvalue 值的提示语String/function-

3、events ​

事件名说明返回值
handleEvent单个查询条件触发事件fieldList 中的 event 值和对应输入的 value 值
tabsChange点击 tab 切换触发被选中的标签 tabs
validateError校验失败抛出事件obj——每个收缩块的对象
back头部标题点击返回事件-

4、Methods ​

事件名说明参数
resetFormFields重置表单-
clearValidate清空校验-
setSelectedTab默认选中 tab默认选中 tab 插槽名