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 | | |