Chem-form NPM | npm.io

`chem-form`

使用 json 的方式便捷开发 form

安装

npm install chem-form
# or
yarn add chem-form

为什么

Vue.js + Element-ui 的组合加快了我们开发中台系统的速度，但是开发中发现存在大量的重复的操作，根据业内比较 🔥 的 scheme 的方式配置表单的方式，对其进行二次开发，加速实际开发速度。

如何使用

// main.js
import chemForm from "chem-form"
Vue.use(chemForm)

// common.vue
<template>
  <chem-form v-model="formData" :scheme="formConfig"></chem-form>
</template>

<script lang="ts">
  import { Vue, Component } from "vue-property-decorator";
  @Component
  export default class extends Vue {
    formData:Record<string, any> = {}
    formConfig = {
      DEBUG: true,
      items: [
        { prop: "name", label: "姓名" },
        { prop: "age", label: "年龄", "x-component": "number"},
        // ... add other form config
      ]
    }
  }
</script>

form Prop

Name	Description	Type
v-model	表单数据	`{ }`
scheme	表单配置
auth	表单权限	`Array`

scheme

Name	Description	params
DEBUG	开启调试模式	Boolean
layout	展示的形态 type 为展示类型， span 为表格模式下每个 form-item 占的大小	{ type: "default / inline / table", span: 8 }
onlyRead	是否为只读模式	Boolean
attrs	扩充属性 element-ui 中 form 自带的属性	Object
items	表单要展示的内容配置	参照 form-item props 配置

form methods

Name	Description	callback	params
resetForm	重置表单	`-`	`-`
validateForm	校验表单	`Promise`	`-`
clearValidate	清空校验	`-`	`propName?: string \| string[]`
setItem	设置某字段的值	`-`	`propName: string, value: any`
getItemRef	获取某字段 Ref	`Vue`	`propName: string`
getFormModel	获取所有表单数据	`Object`	`removeNull:boolean`
submit	表单提交	`Function(model)`	`-`

form-item props

Name	说明	类型	默认值
prop	绑定的值(对应后端字段)	string	必填
label	页面中显示的名称	string	必填
isRender	是否显示	boolean \| Function	true
required	是否进行校验	boolean	false
rules	校验规则	Array	[{ required: true, message: "label 为必填项"}]
description	对字段填写的提示信息	string \| VNode	null
slot	插槽的名字 - 该字段使用插槽内容展示	string	null
x-component	自带的组件名字	string	input (input / number / select / radio / checkbox / switch /slider / timePicker/ datePicker/ rate / upload )
attrs	扩展属性，element-ui 中自带的的属性	Record<string, any>	{}
listeners	扩展监听器，element-ui 该组件自带的监听器	Record<string, Function>	{}
source	源数据，radio，select，checkbox 用来展示的数据	{ labelKey: string, valueKey: string, data: any[] \| Function }	radio / checkbox / select 为必填项
colSpan	表格模式下 form-item 占的大小 - 参照饿了么组件 el-col 中的 span 字段	number	8
supportEntry	表格模式下该字段是否支持	boolean	input / number / select 默认是 true