vue3-easy-form（当前版本:1.0.x）

# 数组

字段（见行高亮）：




 




























 











propName: {
  label: false,   // 块properties的label一般都设置为false
  title: "标题",
  array: {  // 以下是array设置：块项作为数组
    name: "array-tabs",   // 数组类型
    hasOrder: true,   // 是否有序号
    hasDelete: true,  // 是否有删除按钮，默认为true
    hasSort: false,   // 是否有排序按钮，默认为false
    hasAdd: true,     // 是否有添加按钮(下边的添加按钮)，默认为true
    hasCopy: true,    // 是否有拷贝添加按钮(每一行的添加按钮)，默认为false
    hasDelWarn: true, // 是否有删除提示
    fixed: 1,         // 若第一条数据存在，则固定位置，不可移动
    max: 5,           // 不写或小于等于0代表不限制
    headRequired: false,      // 星号是否显示在头部。只在array-table有效
    btnType: false,   // 操作按钮的显示类型：值有 "icon"
    value: [{name: "小天"}],   // 数组的默认值
    insertValue: function(options) {    // 插入(添加/拷贝)时对插入值的处理
      console.log(this.getValue(), options);
      return {name: "小天"};
    },
    rules: true,  // 验证，跟平时一样的写法。trigger只有 input、change
    actions: {    // 事件，跟平时一样的写法。trigger只有 input、change
      trigger: true,  // 会自动匹配同步事件update:modelValue
      handler: function(options) {
        console.log("test array input:", options);
      }
    },
    delMsg: "确定删除吗？",
    delAllMsg: "确定删除所有吗？",
    delWarnBtns: ["确定", "取消"],  // 删除警告框按钮的文本
    before: function(done, data) { done() },  // 操作前调用的钩子，done(false)表示不执行下一步
    rowSpace: 20
  },
  properties: {
    name: {
      label: "名称",
      component: "el-input",
      value: "天天",
      array: "array-card"   // 组件项作为数组
    }
    // ... 其它项
  }
}

# 实例1

功能：行数组、列表数组、insertValue、rules、动态解析、delMsg、delAllMsg、btnType、before、delWarnBtns

# 实例2

功能：tabs数组、legend数组、卡片数组、subLabel、动态解析

# 默认插入值

字段：array.insertValue

  1. 类型为函数时：即可动态根据实际情况修改输出默认值。insertValue(options)的this指向表单；当函数的返回值不为undefined时，即为插入的值，若为undefined，则说明取各自的默认值（如：copy时则取copy的那一行的值）
    参数options：为一个对象，包含的信息如下：
    • oldValues： 插入前，当前数组的值
    • position： 插入的位置，从0开始计算
    • type： "copy" or "add"
    • instance：表单实例（当handler为箭头函数，若需要可用instance取出表单实例使用）
  2. 类型为其它的值时：即插入固定值

# 数组事件

属性array.actions写法跟项组件事件一样，具体见项组件事件

注：数组事件是没有target信息的，其trigger只有 input、change；trigger为空或其它字符串则是提交（form.checkAll()）时再验证。

# 数组验证

属性array.rules写法跟项组件验证一样，具体见项组件验证

# 数组es写法

见实例

在数组es写法中，[i]是一个固定的写法，它代表当前的行，运行时会用索引链(idxChain)进行代替.
若孩(孙)子节点也为数组，也是用[i],
如：es: !{{$root.courses[i].students[i].name}}

注意

[i]必须写在大括号内

（普通的）es写法

# 配置属性

若array存在，说明是一个数组，具体配置如下：

属性名 说明 类型 可选值 默认值 备注
name 哪种分组 string
object		 "array"
"array-table"
"array-tabs"
"array-legend"
"array-card"		 "array" "array-table"不支持组件项（叶子节点）
"array-card"只支持组件项（叶子节点）
hasSort 是否有排序按钮 boolean -- false
hasDelete 是否有删除按钮 boolean -- true
hasAdd 是否有添加按钮 boolean -- true
hasCopy 是否有复制按钮 boolean -- false array-tabs不支持拷贝功能
fixed 固定数量 number >=0 0 前几条是固定的，不可移动，也不可删除
min 最少多少条 number >=0 0 0 代表无限制
max 最多多少条 number >=0 0 0 代表无限制；
大于min
minMsg 小于最小条数时提示 string -- 长度不能小于(min) min>0时有效
maxMsg 大于最小条数时提示 string -- 长度不能大于(max) max>0时有效
hasOrder 是否有序号 boolean -- true --
hasDelWarn 删除提示 boolean -- true 删除时是否有提示
btnType
操作按钮显示类型		 string icon false 只有在"array"
"array-table"
"array-legend"这三种风格中icon才有效
headRequired “星号”的位置 boolean -- true 只在array-table有效；
当设置为true时，“星号”在table头部显示，而不是在内容区随组件显示
type 头部类型 string line,
card,
bg		 card array-tabs时有效；效果跟tabs布局一样
rowSpace 每一行的间隔 number >=0 undefined 当为undefined, 继承父类的rowSpace
insertValue 插入时的值 function
其它的值		 -- 添加或拷贝时各自的默认值
hasBorder 是否有边框 boolean true/false true
subLabel tabs头部名称 number >=0 0 array-tab和array-legend时有效，其余情况无效; 支持组件化和动态解析
actions 数组事件 array
object		 trigger只有:
input
change		 -- 跟项组件事件写法一样，就是返回信息少了target
rules 数组验证 boolean
object		 trigger只有:
input
change		 -- 跟项组件验证写法一样
value 数组的默认值 array -- -- --
delMsg
单个删除提示		 string
function
object		 -- 确定删除吗？ 可动态解析
delAllMsg
全部删除提示		 string
function
object		 -- 确定删除所有吗？ 可动态解析
delWarnBtns
删除警告框按钮的文本		 array -- ["确定", "取消"] 数组必须是两个字符串组成
before
操作前调用的钩子		 function
参数：(done, data)		 -- -- 1. 执行操作时（增加, 复制, 删除, 上移, 下移, 全删）都会调用，用户可根据返回参数的data.event.type来判断是哪种操作
2. done是一个函数，要执行done()来告诉系统进行下一步操作，done(false)表示系统将停止下来，取消所需要执行的操作。

← 表单值 →