deeform
<p>> 定义： 参数中<code>*</code>表示必填项，<code>{key}</code>表示对象的键，<code>{value}</code>表示对象的值；类型为<code>array</code>或<code>object</code>有子属性</p>
<h2>Attributes</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选择</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>rules</td>
<td>表单校验规则对象</td>
<td>object</td>
<td>—</td>
<td>{}</td>
</tr>
<tr>
<td>* formData</td>
<td>表单项属性集合</td>
<td>array</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>* form</td>
<td>表单数据对象</td>
<td>object</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>labelWidth</td>
<td>表单项标题宽度</td>
<td>string</td>
<td>—</td>
<td>90px</td>
</tr>
<tr>
<td>formButtons</td>
<td>表单按钮</td>
<td>array</td>
<td>—</td>
<td>[]</td>
</tr>
<tr>
<td>formBtnPosition</td>
<td>表单按钮位置</td>
<td>string</td>
<td>left/center/right</td>
<td>left</td>
</tr>
</tbody>
</table>
<h2>Rules Attributes</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选择</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>{key}</td>
<td>验证规则键，对应FormData-Item Data key值</td>
<td>string</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>{value}</td>
<td>验证规则,规则参照element-ui验证规则</td>
<td>array</td>
<td>—</td>
<td>—</td>
</tr>
</tbody>
</table>
<h2>FormData-Item Attributes</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选择</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>表单区块名称</td>
<td>string</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>split</td>
<td>表单区块分割列数</td>
<td>number</td>
<td>—</td>
<td>1</td>
</tr>
<tr>
<td>data</td>
<td>表单区块数据</td>
<td>array</td>
<td>—</td>
<td>—</td>
</tr>
</tbody>
</table>
<h2>FormData-Item Data Attributes</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选择</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>key</td>
<td>表单项键值，唯一</td>
<td>string</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>title</td>
<td>表单项名称</td>
<td>string</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>width</td>
<td>表单项宽度</td>
<td>number</td>
<td>1/.../FormData-Item split选择的值</td>
<td>1</td>
</tr>
<tr>
<td>component</td>
<td>表单项属性对象</td>
<td>object</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>handler</td>
<td>表单项自定义事件对象</td>
<td>object</td>
<td>—</td>
<td>—</td>
</tr>
</tbody>
</table>
<h2>FormData-Item Handler Attributes</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选择</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>{key}</td>
<td>自定义事件键值，可调用element-ui组件中事件</td>
<td>—</td>
<td>click/focus/...</td>
<td>—</td>
</tr>
</tbody>
</table>
<h2>FormData-Item Component Attributes</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选择</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>组件名称，当为readable/upload时，有特殊属性，见下方</td>
<td>string</td>
<td>link/readable/custom/upload/el-input/el-autocomplete/el-input-number/el-radio/el-checkbox/el-select/el-cascader/el-switch/el-slider/el-time-select/el-time-picker/el-date-picker/el-rate/el-color-picker</td>
<td>—</td>
</tr>
<tr>
<td>formatter</td>
<td>当name为readable时特有属性，格式化</td>
<td>object</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>url</td>
<td>当name为upload时特有属性，上传路径</td>
<td>string</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>params</td>
<td>当name为upload时特有属性，上传额外需要的参数</td>
<td>object</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>...</td>
<td>el开头参数参照element-ui</td>
<td>—</td>
<td>—</td>
<td>—</td>
</tr>
</tbody>
</table>
<p>> name为custom时为自定义组件，需要向表单中填入具名插槽，插槽名称和表单项key相同</p>
<h2>FormData-Item Component Readable Formatter Attributes</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选择</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>格式化类型</td>
<td>string</td>
<td>number/date/money</td>
<td>—</td>
</tr>
<tr>
<td>pattern</td>
<td>格式化格式，type为number、money时，表示保留几位小数；type为date时，表示时间格式化格式</td>
<td>string</td>
<td>—</td>
<td>—</td>
</tr>
</tbody>
</table>
<h2>Form Attributes</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选择</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>{key}</td>
<td>表单项的键，对应FormData-Item Data key，FormData-Item Data中定义后自动生成</td>
<td>string</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>{value}</td>
<td>表单项的值</td>
<td>string（文件上传为array）</td>
<td>—</td>
<td>—</td>
</tr>
</tbody>
</table>
<h2>FormButtons-Item Attributes</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选择</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>按钮显示文字</td>
<td>string</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>type</td>
<td>按钮类型，提供了验证和取消验证方法，form组件通过@on-submit调用提交回调事件,@on-cancel调用取消回调事件</td>
<td>string</td>
<td>submit/cancel</td>
<td>—</td>
</tr>
<tr>
<td>component</td>
<td>button v-bind属性对象</td>
<td>object</td>
<td>—</td>
<td>—</td>
</tr>
</tbody>
</table>
<p>> 按钮不满足需求时，可填入匿名插槽</p>
<h2>格式参考</h2>
<pre><code class="language-html">&lt;template&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;dee-form
:form=&quot;propForm&quot;
:form-data=&quot;propFormData&quot;
:form-buttons=&quot;formButtons&quot;
:rules=&quot;rules&quot;
@on-submit=&quot;submitFun&quot;
@on-cancel=&quot;submitFun&quot;
@on-validate=&quot;submitFun&quot;
@on-disvalidate=&quot;submitFun&quot;
/&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
name: 'Form',
data() {
return {
// 校验规则
rules: {
a1: [
{ required: true, message: '请输入', trigger: 'change' }
]
},
// 表单按钮
formButtons: [
{
text: '提交',
type: 'submit',
component: {
type: 'primary'
}
},
{
text: '取消',
type: 'cancel'
},
{
text: '需要验证的点击',
type: 'validate',
component: {
type: 'primary'
},
validate: true
},
{
text: '不需要验证的点击',
type: 'disvalidate'
}
],
// form表单数据
propForm: {
a5: '只读文本的值'
},
// form 表单展示方式配置
propFormData: [{
split: 3,
title: '基本信息',
data: [
{
key: 'a1',
title: '输入框',
component: {
name: 'el-input'
}
},
{
key: 'a2',
title: '选择器',
component: {
name: 'el-select',
options: [
{ 'label': 'K', 'value': 'K' },
{ 'label': 'F', 'value': 'F' },
{ 'label': 'C', 'value': 'C' },
{ 'label': 'S', 'value': 'S' },
{ 'label': 'D', 'value': 'D' },
{ 'label': 'P', 'value': 'P' }]
}
},
{
key: 'a3',
title: '开关',
component: {
name: 'el-switch'
}
},
{
key: 'a4',
title: '时间选择器',
component: {
name: 'el-time-select'
}
},
{
key: 'a4-1',
title: '时间选择器',
component: {
name: 'el-time-picker'
}
}, {
key: 'a4-2',
title: '时间选择器',
component: {
name: 'el-date-picker'
}
},
{
key: 'a5',
title: '只读文本',
component: {
name: 'readable'
}
},
{
key: 'a6',
title: '单选框',
component: {
name: 'el-radio',
options: [
{
label: '按钮1',
value: '1'
}, {
label: '按钮2',
value: '2'
}
]
}
},
{
key: 'a7',
title: '复选框',
component: {
name: 'el-checkbox',
labelName: '复选框'
}
},
{
key: 'a9',
title: '复选框',
component: {
name: 'el-checkbox-group',
options: [
{
labelName: '选项1',
label: '1'
}, {
labelName: '选项2',
label: '2'
}
]
}
},
{
key: 'a1_1',
title: '文本域',
width: 3,
component: {
name: 'el-input',
type: 'textarea',
rows: '2'
}
},
{
key: 'a8',
title: '文件上传',
component: {
name: 'upload',
options: []
}
}
]
}]
}
},
watch: {
},
methods: {
submitFun() {
}
}
}
&lt;/script&gt;
&lt;style lang=&quot;scss&quot;&gt;
&lt;/style&gt;</code></pre>