vue-element-form-generator v1.0.0

vue-element-form-generator

• 适用于ElementUI的Form Generator
• 通过JSON对象的方式创建表单，简单易上手
• 添加initFinish和updateFinish钩子，适用于表单初始化完成和更新完成等表单整体的默认事件
• 创建表单的可操作对象formCtx，定义了表单可操作属性和可操作方法，在表单的钩子和控件的事件中默认可用
• 使用ElementUI默认的24栅格布局，方便进行布局安排
• 提供占位组件，占满整行，下一个组件直接另起一行开始

1. 使用先决条件

• 引入ElementUI
  • 在入口的js文件(例如main.js)中整体引入ElementUI，暂不支持其他方式
• 引用vue-element-form-generator
  • 在需要使用的页面，使用import引入:

  import FormGenerator from 'vue-element-form-generator'

  export default {
    data() {
      formConfig: {
        labelWidth: 80,
        lifecycle: {
          initFinish(formCtx) {
            // 初始化完毕
          },
          updateFinish(formCtx) {
            // 更新完毕
          }
        },
        items:[
          // 表单字段集合
        ]
      }
    }
  }

• 全局引入，在main.js中引用:

  import FormGenerator from 'vue-element-form-generator'
  Vue.component(FormGenerator)

2. FormGenerator的内置对象

• formData: 表单当前的数据
• params: 表单依赖的外部参数
• resetForm:

3. 目前支持ElementUI原生的表单控件类型以及相应属性、事件的描述

3.1 Input(输入框)

• 属性

• 事件

(1) change事件: 值改变事件

(2) clear事件: 值清空事件，同时会自动触发change事件

• 示例

一个普通的文本框

{
  type: 'text',
  id: 'simpletext',
  name: 'simpletext',
  label: '普通文本'
}

带有事件的文本框

{
  type: 'text',
  id: 'textWithEvent',
  name: 'textWithEvent',
  label: '带事件的文本框',
  event: {
    change(formCtx, value) {
      console.log(value)
      console.log(formCtx)
    },
    clear(formCtx) {
      console.log(formCtx)
    }
  }
}

3.2 Switch(开关)

• 属性

• 事件

  (1) change事件: 值改变事件

• 示例

{
  type: 'switch',
  name: 'switch1',
  id: 'switch1',
  readonly: false,
  label: '开关1',
  visible: true,
  width: 4,
  events: {
    change(formCtx, val) {
      formCtx.formData.switch2 = val ? 1 : 0
    }
  }
}

3.3 Number数字输入框

• 属性

• 事件

(1) change事件: 值改变事件

(2) focus事件: 聚焦事件

(3) blur事件: 失去焦点事件

• 示例

(1) 有最大和最小值

{
  type: 'number',
  id: 'number2',
  name: 'number2',
  width: 6,
  label: '数字2',
  min: 0,
  max: 1,
  precision: 2,
  step: 0.1
}

(2) 带值改变事件

{
  type: 'number',
  id: 'number2',
  name: 'number2',
  width: 6,
  label: '数字2',
  min: 0,
  max: 1,
  precision: 2,
  step: 0.1,
  events: {
    change(formCtx, val) {
      console.log('当前值:', val)
    }
  }
}

3.4 Radio单选框

• 属性

• 事件

(1) change事件: 值改变事件

• 示例

{
  type: 'radio',
  id: 'radio1',
  name: 'radio1',
  width: 12,
  label: '单选框1',
  dictList: [{'text': 11, 'value': '1'}, {'text': 22, 'value': '2'}, {'text': 33, 'value': '3'}],
  default: '2'
}

3.5 Checkbox复选框

• 属性

• 事件

(1) change事件: 值改变事件

• 示例

{
  type: 'checkbox',
  id: 'checkbox1',
  name: 'checkbox1',
  width: 12,
  label: '复选框1',
  dictList: [{'text': 11, 'value': '1'}, {'text': 22, 'value': '2'}, {'text': 33, 'value': '3'}],
  default: ['1']
}

3.6 Select下拉框

• 属性

• 事件

(1) change事件: 值改变事件

(2) visible-change: 下拉框出现/隐藏事件

(3) remove-tag: 移除选中tag(多选时可用)

(4) clear: 清空选中选项

(5) blur: 失去焦点

(6) focus: 获得焦点

• 示例

{
  type: 'select',
  id: 'multiselect1',
  name: 'multiselect1',
  width: 6,
  label: '复选框1',
  multiple: true,
  dictList: [
    {'text': 11, 'value': '1'}, 
    {'text': 22, 'value': '2'}, 
    {'text': 33, 'value': '3'},
    {'text': 44, 'value': '4'},
    {'text': 55, 'value': '5'},
  ],
  clearable: true,
  limit: 3,
  events: {
    'remove-tag'(formCtx, removeVal) {
      console.log('remove tag', removeVal)
    }
  }
}

3.7 Button按钮

• 属性

• 事件

(1) click: 点击事件

• 示例

{
  type: 'button',
  btnText: '按钮1',
  id: 'btn1',
  width: 4,
  size: 'medium',
  events: {
    click(formCtx) {
      formCtx.formData.switch1 = !formCtx.formData.switch1
      formCtx.formData.text1 = formCtx.formData.text1 + formCtx.formData.switch2
    }
  }
}

3.8 Timepicker时间选择器

• 属性

• 事件

(1) change: 值改变事件

(2) focus事件: 聚焦事件

(3) blur事件: 失去焦点事件

3.9 Dimepicker日期选择器

• 属性

• 事件

(1) change: 值改变事件

(2) focus事件: 聚焦事件

(3) blur事件: 失去焦点事件

4. 自定义的表单控件

4.1 fill填充组件

• 属性

• 示例

(1) 自适应宽度

{
  type: 'fill'
}

(2) 自定义宽度

{
  type: 'fill',
  width: 20
}

• 备注

  这是个填充栏位，用于需要另起一行时使用
  可以不填写宽度，默认填充整行，下一个栏位直接另起一行
  没有任何和数据相关的属性，也不会影响表单的配置和数据