表单组件文档
实现功能
根据传入的JSON生成对应的表单
参数说明
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| model | Form中的属性名 | String | —— | —— |
| span | 布局参数，整行为24 | Number | —— | 24 |
| label | form-item-label | String | —— | —— |
| inputType | 表单种类 | String | —— | —— |
| default | 默认值 | String/Array | —— | —— |
| disabled | 禁用 | Boolen | —— | false |
| noShow | 不显示 | Boolen | —— | false |
| maxLength | 最大长度,input和textarea下可用 | Number | —— | —— |
| resize | textarea下可用，输入框是否可拉大 | String | none, both, horizontal, vertical | vertical |
| rows | textarea下可用，固定输入框高度 | Number | —— | —— |
| radios | radio下可用，对象的数组，value为值，label为标签 | Array | —— | —— |
| selectOptions | select下可用，对象的数组，value为值，label为标签 | Array | —— | —— |
| cascaderOptions | cascader下可用，对象的数组，参考el-cascader中的options | Array | —— | —— |
| cascaderProps | cascader下可用，对象的数组，参考el-cascader中的Props | Array | —— | —— |
| tableColumns | table下可用，对象的数组，prop代表列对应字段，label为列名 | Array | —— | —— |
| limit | image下可用，上传的图片数量限制 | Object | —— | —— |
| upload | image下必传，上传接口 | Function | —— | —— |
| textModel | 当是文本显示的时候使用的model值，防止下拉传入的是code找不到对应的字段 | String | —— | —— |
inputType
| 参数 | 说明 |
|---|
| input | input输入框 |
| textarea | textarea输入框，此类型下resize和rows可用 |
| radio | radio，此类型下radios可用 |
| select | select，此类型下selectOptions可用 |
| cascader | cascader，此类型下cascaderOptions，cascaderProps可用 |
| date | date |
| daterange | daterange |
| table | 表格，此类型下tableColumns可用 |
| image | 上传图片，此类型下image可用 |
| placeholder | 占位符，配合span使用来控制表单样式 |
| htmlImage | 图片 |
| htmlText | 文本 |
Events
| 参数 | 说明 | 类型 |
|---|
| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object)) |
| validateField | 对部分表单字段进行校验的方法 | Function(props: array | string, callback: Function(errorMessage: string)) |
| clearValidate | 移除表单项的校验结果。 | —— |
例子
//dom
<template>
<div id="app">
<cv-form-moudel
ref="form"
:form-list="formOptionsHeader"
:form-data="formData"
:label-width="'100px'"
:form-list-rules="formRule"
/>
</div>
</template>
//data
<script>
export default {
data() {
return {
formOptionsHeader: [
{
span: 12,
model: "voltage",
label: "电压",
inputType: "input",
},
{
span: 12,
model: "line",
label: "线路",
inputType: "input",
},
{
span: 12,
model: "shootingDate",
label: " 拍摄日期",
inputType: "date",
dateType: "datetime",
},
{
span: 6,
model: "sectionStart",
label: "区段开始",
inputType: "select",
resize: "none",
selectOptions: [],
},
{
span: 6,
model: "sectionEnd",
label: "区段结束",
inputType: "select",
resize: "none",
selectOptions: [],
},
{
span: 24,
model: "name",
label: "任务名称",
inputType: "input",
},
{
span: 12,
model: "type",
label: "巡检类型",
inputType: "input",
},
{
span: 12,
model: "mode",
label: "巡检方式",
inputType: "input",
},
{
span: 12,
model: "equipment",
label: "巡检设备",
inputType: "input",
},
{
span: 12,
model: "photographerId",
label: "拍摄人员",
inputType: "input",
},
],
formData: {
name: "",
voltage: "",
line: "",
shootingDate: "",
sectionStart: "",
sectionEnd: "",
type: "",
mode: "",
photographerId: "",
equipment: "",
}, // 表单绑定数据
formRule: {
name: [
{ required: true, message: "请输入任务名称", trigger: "change" },
],
voltage: [{ required: true, message: "请输入电压", trigger: "change" }],
line: [{ required: true, message: "请输入线路", trigger: "change" }],
shootingDate: [
{ required: true, message: "请输入拍摄日期", trigger: "change" },
],
sectionStart: [
{ required: true, message: "请输入区段开始", trigger: "change" },
],
sectionEnd: [
{ required: true, message: "请输入区段结束", trigger: "change" },
],
type: [
{ required: true, message: "请输入巡检类型", trigger: "change" },
],
mode: [
{ required: true, message: "请输入巡检方式", trigger: "change" },
],
equipment: [
{ required: true, message: "请输入巡检设备", trigger: "change" },
],
photographerId: [
{ required: true, message: "请输入拍摄人员", trigger: "change" },
],
},
};
}
};
</script>