动态表单组件

安装

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 },
      ]

slot

表单项各项都可以用插槽重写，slot name=add+item.key

name |说明
:-------:|:----- add-title|弹窗标题 add-footer|弹窗footer

项目地址

点击跳转至GITHUB