vue2+element封装rules， 支持json多层级

在Vue 2中结合Element UI的表单验证规则，你可以创建一个递归组件来支持多层级的JSON结构。以下是一个简化的例子：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <recursive-form-item
      :form="form"
      :schema="schema"
      :rules="rules"
      :parent-prop="parentProp"
    ></recursive-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
import RecursiveFormItem from './RecursiveFormItem.vue';
 
export default {
  components: {
    RecursiveFormItem
  },
  data() {
    return {
      form: {},
      schema: {
        // 这里是你的多层级JSON结构
      },
      rules: {
        // 这里是你的验证规则
      },
      parentProp: ''
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('验证通过!');
        } else {
          console.log('验证失败!');
          return false;
        }
      });
    }
  }
};
</script>

RecursiveFormItem.vue组件需要递归地渲染每个表单项，并根据传入的schema和rules生成相应的验证规则。

<template>
  <div v-if="schema">
    <el-form-item
      v-for="(value, key) in schema"
      :key="key"
      :prop="parentProp + key"
      :label="key"
    >
      <recursive-form-item
        v-if="typeof value === 'object'"
        :form="form"
        :schema="value"
        :rules="rules"
        :parent-prop="parentProp + key + '.'"
      ></recursive-form-item>
      <el-input
        v-else
        v-model="form[parentProp + key]"
        :placeholder="key"
        :rules="rules[parentProp + key]"
      ></el-input>
    </el-form-item>
  </div>
</template>
 
<script>
export default {
  name: 'RecursiveFormItem',
  props: ['form', 'schema', 'rules', 'parentProp'],
  methods: {
    getRules(key) {
      return this.rules[key];
    }
  }
};
</script>

在这个递归组件中，你需要确保parentProp正确地传递并拼接，以便每个嵌套层级的表单项都有正确的prop属性。

这个例子提供了一个简单的框架，你需要根据实际的JSON结构和验证规则来扩展和调整。