参数总览


formDesc: {
  field: {
    type: String, // 类型, 具体类型参考下面
    label: String, // `form-item` 的 `label` 属性值
    default: Mix, // 该表单项的默认值
    attrs: Object, // 所渲染组件的属性, `v-bind` 的 API 相同
    layout: Number, //(下个版本将更名为width) 1-24, 默认是24, 占满一整行,当处于<768px时自动为24 具体参考 https://element.eleme.cn/#/zh-CN/component/layout
    tip: String, // 表单项的提示
    vif: Function, // 联动属性: 是否显示(重置值)
    disabled: Function, // 联动属性:是否禁用
    children: Object, // 嵌套
    isReloadOptions: Boolean, // 是否启用options的联动属性
    options: Array | Function | Promise, // checkbox, select等组件的 options 部分, 具体细节参考下面  
    prop: Object, // 用于处理options的自定义key
    displayFormatter: Function, // 对值的显示做进一步处理
    valueFormatter: Function, // 对最终请求的值做处理
    'class': Mix, // 与 `v-bind:class` 的 API 相同,接受一个字符串、对象或字符串和对象组成的数组
    style: Object | Array // 与 `v-bind:style` 的 API 相同,接受一个字符串、对象,或对象组成的数组
    on: Object, // 事件监听器在 `on` 属性内
    slots: Object // 组件的插槽, 使用渲染函数 https://cn.vuejs.org/v2/guide/render-function.html
    scopedSlots: Object // 组件的作用域插槽, 使用渲染函数 https://cn.vuejs.org/v2/guide/render-function.html
  },
  field2: {
    // ...
  },
  // ...
}



参数讲解

type

参考:type 类型列表


label

含义:表单项标签文本,对应 el-form-item 的 label  属性

例如:


formDesc: {
  name: {
    label: '姓名', // 这里指定
    type: 'input'
  }
}

image.png

attrs

含义:指定组件的属性,具体属性需要参考各自组件,在 type 类型列表 有相关链接

例如:


formDesc: {
  name: {
    label: '姓名',
    type: 'input',
    attrs: {
      disabled: true,, // disabled 为 true
      'suffix-icon': 'el-icon-date' // suffix-icon 为 el-icon-date
    }
  }
}

image.png

layout

含义:用于简单布局,默认为 24 ,返回为 1-24 ,当小屏幕( <768px )时, 为 24 , layout 不起作用

例如:


formDesc: {
  name: {
    label: '姓名',
    type: 'input',
    layout: 12 // 占 12/14
  },
  age: {
    label: '年龄',
    type: 'number',
    layout: 12 // 占 12/14
  }
}

image.png

tip

含义:用于提示用户,可以使用【``】符号设置code字段

例如:


formDesc: {
  password: {
    label: '密码',
    type: 'password',
    tip: '密码长度`大于6位`',
    rules: {
      type: 'string',
      min: 6,
      message: '密码长度`大于6位`'
    }
  }
}


image.png


vif

参考:联动属性

disabled

参考:联动属性

children

参考:深度嵌套

options

参考:options讲解

prop

参考:options讲解

displayFormatter

含义:对值处理后用于显示

例如:tag需要传递Array类型的数据,但如果从服务器获取到的是【,】拼接的字符串,就需要对数据做进一步处理,具体可见:


formData: {
  // 这里注意,后端传过来的数据 label 是两张标签的用【,】拼接的,不能正常的不正确
  label: 'vue,js'
},
formDesc: {
  label: {
    type: 'tag',
    label: '文章标签',
    displayFormatter (labels) {
      // 判断 如果是string类型,则调用split(',')方法分割为数组,否则直接返回
      return typeof labels === 'string' ? labels.split(',') : labels
    }
  }
}

image.png


valueFormatter

含义:对最终提交的值做进一步处理

例如:


formData: {
  // label是数组类型,但是数据库要存为【,】分割的字符串,不能存数组
  label: ['vue', 'js']
},
formDesc: {
    label: {
    type: 'tag',
    label: '文章标签',
    valueFormatter (labels) {
      // 如果labels是数组,我们就让他们join
      return Array.isArray(labels) ? labels.join(',') : ''
    }
  }
}


点击提交后的值如下:

image.png


class

style

on

slots

scopedSlots

参考:以上参数借鉴了Vue的render function,具体请参考:https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1

示例:


name: {
  label: '姓名',
  type: 'input',
  class: ['foo', 'bar'],
  style: {
    fontSize: '16px'
  },
  on: {
    change (val) {
      console.log(val)
    }
  },
  slots: {
    // 第一个参数是渲染函数,第二个参数是作用域插槽的数据
    prefix (h) {
      return h('i', { class: 'el-input__icon el-icon-search' })
    },
  }
}

image.png