form-create的:rule通过JSON动态生成，自定义组件实现复用

form-create的:rule通过JSON动态生成，自定义组件实现复用

npm安装
npm i @form-create/element-ui
main.js引入
import formCreate, {maker} from ‘@form-create/element-ui’
Vue.use(formCreate)

<form-create :rule="formRule" :model="formData" ref="formData" ></form-create>

首先再data定义rule存储需要用到的组件库，formRule:[]为form-create动态创建表单规则

rule: [{
        type: 'h-title',
        title: '', // label名称
        field: '', // 字段名称
        value: '', // input值,
        props: {
          text: "",
          primaryIndex: null,
          id: ""
        }
      },
      {
        type: 'input',
        title: '输入框', // label名称
        field: '', // 字段名称
        value: '', // input值,
        col: {
          span: 12
        }]

mounted中实现自定义组件

Vue.component('h-title', {
      template: `<h3 :key="primaryIndex" :id="id">{{text}}</h3>`,
      props: {
        text: {
          type: String,
          required: true
        },
        primaryIndex: {
          type: Number,
          required: true
        },
        id: {
          type: String,
          required: true
        }
      }
    })

js中实现formRule的动态组装

		  this.formRule = []; // 初始化
          this.addForm.formArray.forEach((item, index) => {
            let title = {};
            title = JSON.parse(JSON.stringify(this.rule[0]))  // **一定要使用深拷贝**
            title.props.primaryIndex = this.steps[index].index;
            title.props.id = this.steps[index].id;
            title.props.text = this.steps[index].title;
            console.log('title====', title)
            this.formRule.push(title)；
          });

自定义组件复用效果