Addform NPM | npm.io

动态表单组件

安装

npm i element-ui
npm i addform

main.js 代码

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import addform from 'addform'
Vue.use(ElementUI)
Vue.use(addform)

示例

<add-form :objInfo="objinfo"></add-form>
objinfo: [
        { key: "name", title: "姓名", val: "张三", max: 10 },
        { key: "age", title: "年龄", val: 13, number: true },
        {
          key: "sex", title: "性别", val: "", dicts: [], query: async (a, b) => {
            let url="http://api.lengyun.co:18070/erp/mallvisitor/goodslist.do";
            let data = await axios.post(url,
              {
                "page": 1,
                "pagesize": 24,
                "fieldlist": "*",
                "goodsname": a,
                "fl1": 2,
                "orderlist": "orderid asc"
              })
            b(data.data.data.list.map(a => {
              return {
                label: a.goodsname,
                value: a.goodsid,
              }
            }))
          }
        },
        { key: "time", title: "出生日期", val: "", time: true },
      ]

表单参数列表

参数	说明	类型	默认值	可选值
objInfo	表单属性	Arrary	[]	---
width	表单宽度	Number	780	---
title	表单标题	String	新增	String
isreadonly	是否禁用表单	Boolean	false	---
labelWidth	表单项标题宽度	Number	120	---
defaultItemWidth	默认表单项目宽度	Number	320	---
fullscreen	全屏	Boolean	false	---
showFooter	是否显示footer	Boolean	true	---
showCommitBtn	是否显示提交按钮	Boolean	true	---
showCancelBtn	是否显示取消按钮	Boolean	true	---
commitText	提交按钮文本	String	提交	---
cancelText	取消按钮文本	String	取消	---
center	footer内容是否居中	String	center	center,left,right

表单项参数列表

参数	说明	类型	默认值
title	标题	String	---
key	关联model实体绑定值	String	---
val	value	any	any
number	数字输入框	Boolean	undefined
date	日期输入框	Boolean	undefined
time	时间输入框	Boolean	undefined
dicts	选择框	Array	[]
query	选择框有效，查询方法,执行callBack方法赋值给dicts	Function(queryText,callBack)	undefined
area	多行方本框	Boolean	undefined
radio	单选框	Array	[]
checkbox	多选框	Array	[]
labels	单选框和多选框有效，显示单选框和多选框字段，和values数组长度等长	Array	[]

Events

事件名称	说明	回调参数
saveData	保存表单数据	form 对象数据
close	关闭表单窗体执行事件	---

validate

校验规则	说明	值
required	不能为空	true,false
email	邮箱格式	true,false
max	最大长度	number
validate	自定义验证	function(rule, value, callback)

正则自定义验证示例

objInfo: [
        {
          key: "name",
          title: "姓名",
          val: "",
          required: true,
          validate: (rule, value, callback) => {
            if (value === "fail") {
              callback(new Error("测试错误！"));
            } else {
              callback();
            }
          },
        },
        { key: "age", title: "年龄", val: "18", number: true },
        { key: "company", title: "公司", val: "", max: 10 },
        {
          key: "sex",
          title: "性别",
          val: "",
          dicts: () => [],
          query: (aa, b) => {
            b(
              [
                { label: "男", value: "1" },
                { label: "女", value: "0" },
              ].filter((b) => b.label == aa)
            );
          },
        },
        {
          key: "url",
          title: "日期",
          val: "",
          date: true,
          width: 650,
        },
        { key: "remark", title: "备注", val: "", text: true, width: 650 },
      ]