基于element-ui二次封装一个动态表单组件，给Vue2后台管理项目使用

首先，Element UI提供了一些表单组件，但是如果需要定制化的表单组件，则可以参考以下步骤进行二次封装：

0. 创建一个新的Vue组件作为表单组件的容器
1. 使用Element UI提供的基础表单组件如Input、Select等作为子组件，根据需求添加props属性。
2. 通过props来控制表单组件的数据类型、显示格式和验证规则。
3. 添加动态表单项的功能：通过v-for指令和数组控制表单项的数量和内容。
4. 通过事件和插槽来实现自定义逻辑和样式。

以下是一个简单的示例代码：

<template>
  <el-form :model="formData" ref="form" :rules="ruleForm" label-width="80px">
    <el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label">
      <el-input v-if="item.type === 'input'" v-model="formData[item.prop]" :placeholder="item.placeholder"></el-input>
      <el-select v-else-if="item.type === 'select'" v-model="formData[item.prop]" :placeholder="item.placeholder">
        <el-option v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.label" :value="option.value"></el-option>
      </el-select>
      <!-- 其他表单组件同理 -->
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
​
<script>
export default {
  props: {
    formItems: {
      type: Array,
      required: true,
    },
    // 其他props属性根据需要添加
  },
  data() {
    return {
      formData: {},
      ruleForm: {}, // 验证规则
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，提交表单数据
          // 发送请求等操作...
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

在使用组件时，可以传递一个formItems数组作为props，该数组用于定义表单项的配置。例如：

<template>
  <dynamic-form :form-items="formItems" />
</template>
​
<script>
import DynamicForm from '@/components/DynamicForm';
​
export default {
  components: {
    DynamicForm
  },
  data() {
    return {
      formItems: [
        {
          label: '用户名',
          prop: 'username',
          type: 'input',
          placeholder: '请输入用户名',
          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        },
        {
          label: '性别',
          prop: 'gender',
          type: 'select',
          placeholder: '请选择',
          options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' },
          ],
          rules: [{ required: true, message: '请选择性别', trigger: 'change' }],
        },
        // 其他表单项同理
      ]
    };
  },
};
</script>

通过这种方式，可以快速构建具有灵活性和可维护性的动态表单组件，适用于各种需要动态生成表单的场景。