addform

0.1.13 • Public • Published

动态表单组件

安装

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

/addform/

    Package Sidebar

    Install

    npm i addform

    Weekly Downloads

    0

    Version

    0.1.13

    License

    WWW

    Unpacked Size

    4.89 MB

    Total Files

    24

    Last publish

    Collaborators

    • guoyuanchao