参数总览


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, // 联动属性:是否禁用
    optionsLinkageFields: Array, // 关联属性
    prop: Object, // 用于处理options的自定义key
    options: Array | Function | Promise, // checkbox, select等组件的 options 部分, 具体细节参考下面  
    required: boolean, // 是否必填
    rules: Object | Array, // 单独指定校检规则(会和全局的校检规则合并)
    isShowLabel: Boolean, // 单独指定是否显示标签(会覆盖全局isShowLabel)
    labelWidth: String, // 单独指定标签宽度(会覆盖全局labelWidth)
    break: Boolean, // 强制换行
    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

default

含义:用于指定默认值,同时支持联动默认值


formDesc: {
  age: {
    label: '年龄',
    type: 'number',
    default: 18
  }
}

image.png

tip

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

例如:


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


image.png


isShowLabel

含义:是否显示标签,默认值为 true,会覆盖全局的 isShowLabel

labelWidth

含义:标签宽度,默认 auto ,当指定时,会覆盖全局 labelWidth


isShowLabel & labelWidth 示例如下:

image.png


formDesc: {
  name: {
    label: '姓名',
    type: 'input',
    layout: 18
  },
  age: {
    label: '年龄',
    type: 'number',
    layout: 6,
    isShowLabel: false,
    labelWidth: '0',
    default: 18
  }
}


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


break

强制换行,break 主要是解决一下情况的:

image.png

当出现高度不一致的情况,由于内部采用的是 el-row 和 el-col,其为左浮动(float: left),就出出现下面的输入框会跟着上面的内容,而不是另起一行,如果配置了 break 为 true,则会达到预期效果:

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


vif

参考:联动属性

disabled

参考:联动属性

children

参考:深度嵌套

options

参考:options讲解

prop

参考:options讲解

required

参考:参数校检

rules

参考:参数校检