# 数组

字段(见行高亮):




 




























 











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,   // v1.7.6; 操作按钮的显示类型:值有 "icon"
    value: [{name: "小天"}],   // 数组的默认值
    insertValue: function(options) {    // 插入(添加/拷贝)时对插入值的处理
      console.log(this.getValue(), options);
      return {name: "小天"};
    },
    rules: true,  // 验证,跟平时一样的写法。trigger只有 input、change
    actions: {    // 事件,跟平时一样的写法。trigger只有 input、change
      trigger: "input",
      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

功能:行数组列表数组insertValuerules动态解析delMsgdelAllMsgbtnTypebeforedelWarnBtns

# 实例2

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

# 默认插入值

字段:array.insertValue

  1. 类型为函数时:即可动态根据实际情况修改输出默认值。insertValue(options)的this指向表单;当函数的返回值不为undefined时,即为插入的值,若为undefined,则说明取各自的默认值(如:copy时则取copy的那一行的值)
    参数options:为一个对象,包含的信息如下:
    • oldValues: 插入前,当前数组的值
    • position: 插入的位置,从0开始计算
    • type: "copy" or "add"
    • instance1.7.8:表单实例(当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 1.7.6
操作按钮显示类型
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-tabarray-legend时有效,其余情况无效; 支持组件化动态解析
actions 数组事件 array
object
trigger只有:
input
change
-- 项组件事件写法一样,就是返回信息少了target
rules 数组验证 boolean
object
trigger只有:
input
change
-- 项组件验证写法一样
value 数组的默认值 array -- -- --
delMsg 1.7.3
单个删除提示
string
function
object
-- 确定删除吗? 动态解析
delAllMsg 1.7.3
全部删除提示
string
function
object
-- 确定删除所有吗? 动态解析
delWarnBtns 1.7.7
删除警告框按钮的文本
array -- ["确定", "取消"] 数组必须是两个字符串组成
before 1.7.3
操作前调用的钩子
function
参数:(done, data)
-- -- 1. 执行操作时(增加, 复制, 删除, 上移, 下移, 全删)都会调用,用户可根据返回参数的data.event.type来判断是哪种操作
2. done是一个函数,要执行done()来告诉系统进行下一步操作,done(false)表示系统将停止下来,取消所需要执行的操作。