el-form-generator-vue2 v0.2.1

安装

yarn

yarn add el-form-generator-vue2

npm

npm install el-form-generator-vue2

使用

引入组件

import ElFormGenerator from '../index.js'
Vue.use(ElFormGenerator);

使用组件

<template>
  <div>
    <ElFormGenerator 
      ref="realFormRef"
      :data="widgetForm" 
      @change="onFormChange"
    />

    <el-button @click="handleReset">重置</el-button>
    <el-button type="primary" @click="handleGetData">获取数据</el-button>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        widgetForm : {
          list: [
              {
                label: '输入框',
                type: 'input',
                model:"md1",
                options: {
                  width: '100%',
                  defaultValue: '',
                  placeholder: '请输入',
                  maxlength: null,
                  prefix: '',
                  suffix: '',
                  prepend: '',
                  append: '',
                  disabled: false,
                  clearable: true,
                  readonly: false,
                }
              },
          ], //已选的组件列表
          config: { //表单配置信息
            size: 'default',
            hideRequiredAsterisk: false,
            labelWidth: 100,
            labelPosition: 'right'
          }
        }
    }
  },
  methods:{
    onFormChange(model){ //表单变化触发
      console.log(model)
    },
    handleReset(){ //重置
      this.$refs.realFormRef.reset()
    },
    handleGetData() { //获取表单数据
      this.$refs.realFormRef.getData().then((res) => {
        console.log(res)
      })
    },
  }
}
</script>

组件详细配置参数请参考使用文档：

https://johnnyjintao.github.io/form-design-docs/