Fields 表单字段配置

属性名	属性值说明	默认值
label	[String] 字段描述	无
field	[String] 字段名称	无
type	[String] 输入类型 可选值 input/select/checkbox/radio/datepicker/timepicker/cascader/split 设置为 split 表示在表单此处插入分割线，参考 表单分段	input
innerType	[String] 内部类型 对应 element-ui 相应组件的 type (opens new window) 属性配置	无
value	[String|Number|Boolean|Array|Object] 字段默认值 如果选单值是基本类型，应设置为空字符串 如果选单值是数组，应设置为 []	无
options	[Array] 设置候选值 为 type 值为 select/checkbox/radio/cascader 的字段设置选项列表	无
fetch	[Object] 远程获取候选值 通过 api 为 type 值 select/checkbox/radio/cascader 的字段获取选项列表 详细配置参考 fetch 配置	无
labelKey	[String] 自定义 label 字段 当 type 值为 select/checkbox/radio 时可用 用于指定选项数据中的其他字段作为 label 字段	label
valueKey	[String] 自定义 value 字段 当 type 值为 select/checkbox/radio 时可用 用于指定选项数据中的其他字段作为 label 字段	value
className	[String] 自定义样式名	无
span	[Number|String] 跨列数 设置的值不能大于 col 属性设置的值	1
clearable	[Boolean] 显示清空按钮	true
disabled	[Boolean] 是否禁用	false
autofocus	[Boolean] 是否自动获取焦点	false
readonly	[Boolean] 是否只读	false
multiple	[Boolean] 是否多选 type 值为 select 时有效	false
multipleLimit	[Number] type 值为 select，且多选时，允许选择的项目数	无
min	[Number] type 值为 checkbox 时，表示可选中项目的最少个数; type 值为 number 或 innerType 值为 number 时，表示可输入的最小值	无
max	[Number] type 值为 checkbox 时，表示可选中项目的最多个数; type 值为 number 或 innerType 值为 number 时，表示可输入的最大值	无
filterable	[Boolean] 是否可筛选 type 值为 select 时有效	false
filter-method	[Function] 自定义选项筛选方法 type 值为 select 时有效	无
rule	[String|Object|Array|Function] 字段校验规则配置 详细配置参考校验规则配置	无
link	[Object|Array] 字段关联操作配置 详细配置参考关联操作配置	无
on	[Object] 字段元素事件监听配置 详细配置参考字段事件监听示例	无
order	[Number] 自定义字段排列顺序 注意：通过情况下不需要改属性配置，因为 fields 配置本身就是有序的	无
...	其他设置属性，参考 element-ui 各个 表单元素 (opens new window) 相关属性设置 如个别属性未在通用列表获得支持，请提交反馈。	无

字段事件监听示例

const formFields = [{
  label: '表具编号',
  field: 'meterNo',
  value: '',
  type: 'input',
  on: {
    /**
     * 获得焦点事件，事件回调参数列表（下同）：
     * value {string|number|array|boolean} 字段当前值
     * config {object} 当前字段配置
     * event {object} 字段元素 dom 引用，需要注意，input/change 事件回调中不存在该参数
     */
    focus: (value, config, event) => {
      console.info('focus => ', value, config, event.target)
    },
    // 输入事件
    input: (value, config) => {
      console.info('input => ', value, config)
    },
    // 值改变事件
    change: (value, config) => {
      console.info('change => ', value, config)
    },
    // 失去焦点事件
    blur: (value, config, event) => {
      console.info('blur => ', value, config, event.target)
    }
  }
}]

预设表单字段

将常用字段配置为预设字段，可极大改善列表、表单、筛选条控件的配置体验。