SchemaForm 表单

介绍

SchemaForm是一个表单组件

引入

import Vue from 'vue';
import SchemaForm from '@lambo-design-mobile/schema-form';

Vue.use(SchemaForm);

实现方式

• type: 'card form search'
  • 列表中的card是一种展现方式 编辑明细表单是一种 查询应该可以复用编辑明细
  • card 需要指定标题的字段 副标题的字段 card的图标 状态的图标
• 表单定义 fieldList:

[
  title: '表单标题',
  formKey: '表单元素的键，值存在v-model',
  type: 'input | number | textarea | select | checkbox | radio | treeselect | datepicker | fileUpload | imgUpload',
  props: Object, // 传给子组件的属性
  span: 8 | 12 | 24, // 栅格布局占据的空间树，默认即可，支持自定义
  enumKey: '', // 单选、多选、下拉 的数据源枚举值，系统配置的枚举值ID，组件自动完成枚举值的获取
  enumList: [], // 单选、多选、下拉 的数据源选项
  required: true | false,
  validate: (rule, value, callback) => { return callback(new Error("不能为空！")); }, // 校验函数
  render: (h, fieldDef, form)=>{}, // 自定义渲染函数，如果你的render函数太多太复杂，建议使用原生的Form组件去吧，这个不适合你用
  disabled: (form)=>{}, // 用于控制表单元素只读，可设置为Boolean或者返回Boolean的函数
  condition: (form)=>{}, // 用于控制该表单项展示隐藏，可设置为Boolean或者返回Boolean的函数，否则仅在函数返回true的时候展示
]

• 表单值 v-model
• labelWidth 默认 $config.labelStyle.labelWidthSmall，一般取默认值即可，支持自定义
• gridColumns 一行展示几列表单元素，一般取默认值即可，支持自定义

属性

| 属性 | 类型 | 默认值 | 说明 | | ------------- | ------ | ------ | ------------------------------------------------------------------------------------------------------------------------- | | value | Object | {} | 表单的数据定义，推荐使用v-model | | fieldList | Array | [] | 表单的一项定义，详见表单项属性 | | gridColumns | Number | 3 | 一行展示表单的列数，不设置默认为3列，查询条件的表单仅支持4列 | | labelWidth | Number | 200 | 表单的label宽度，单位为像素，一般不建议修改 | | formType | String | form | search:查询条件表单 form:业务表单 | | searchLoading | Boolean | false | 查询条件表单的业务场景下，查询按钮的禁用标志 | | queryBtn | Boolean | true | 展示查询条件，有些个性化的查询不需要查询条件 | | funId | String | $route.meta.permissionId | 当前form表单的唯一功能主键，用于持久化预置查询条件的预置数据 |

表单项属性

| 属性 | 类型 | 默认值 | 说明 | | ------------- | ------ | ------ | ------------------------------------------------------------------------------------------------------------------------- | | title | String | '' | 表单标题 | | formKey | String | '' | 表单元素的键，值存在v-model | | type | String | '' | 表单项的渲染类型，默认文本，input \| number \| textarea \| select \| checkbox \| radio \| treeselect \| datepicker \| fileUpload \| imgUpload | | props | Object | 无 | 传给表单项的渲染子组件的属性，与使用原组件的属性一致 | | span | Number | 8 | 栅格布局占据的空间树，默认即可，支持自定义 8 | 12 | 24 | | enumKey | String | 无 | 单选、多选、下拉 的数据源枚举值，系统配置的枚举值ID，组件自动完成枚举值的获取 | | enumList | Array | 无 | 单选、多选、下拉 的数据源选项，[{K: '', V: ''}] | | required | Boolean | false | 控制是否必填选项 | | validate | Function | 无 | 自定义校验函数(rule, value, callback) => { return callback(new Error("不能为空！")); } | | render | Function | 无 | 自定义渲染函数(h, fieldDef, form)=>{} | | disabled | Function | Boolean | 无 | 用于控制表单元素只读，可设置为Boolean或者返回Boolean的函数(form)=>{ return true } | | condition | Function | Boolean | 无 | 用于控制该表单项展示隐藏，可设置为Boolean或者返回Boolean的函数，否则仅在函数返回true的时候展示(form)=>{ return true } |

Api

• validate 校验form表单当前输入值是否合法
• validateField 校验form表单表单项当前输入值是否合法，callback是回调函数，可不传 validateField(key, callback)
• resetFields 重置form校验

事件

• defaultCacheDone 取到预设查询条件默认值之后的回调函数

defaultCacheDone(form) {
  this.form = form // 将取到的值赋给当前页面的查询条件
  this.query() // 执行查询
}