vue2.0 elementui 封装表单

在Vue 2.0中使用Element UI框架封装一个通用表单组件的基本步骤如下：

1. 创建一个新的Vue组件文件，例如BaseForm.vue。
2. 在该组件中，使用el-form和相关的el-form-item组件来构建表单。
3. 通过props传递数据和方法到子组件，如表单项(formItems)、数据(formData)、提交方法(submitMethod)等。
4. 在父组件中引入并使用BaseForm组件，并传递必要的props。

以下是一个简单的封装例子：

BaseForm.vue:

<template>
  <el-form :model="formData" @submit.native.prevent="submitForm">
    <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, el-date-picker等 -->
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  props: {
    formItems: {
      type: Array,
      required: true
    },
    formData: {
      type: Object,
      required: true
    },
    submitMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    submitForm() {
      this.submitMethod(this.formData);
    }
  }
};
</script>

父组件中使用BaseForm.vue:

<template>
  <base-form
    :form-items="formItems"
    :form-data="formData"
    :submit-method="submitForm">
  </base-form>
</template>
 
<script>
import BaseForm from './BaseForm.vue';
 
export default {
  components: {
    BaseForm
  },
  data() {
    return {
      formItems: [
        { label: '用户名', prop: 'username', placeholder: '请输入用户名', type: 'input' },
        { label: '密码', prop: 'password', placeholder: '请输入密码', type: 'input' }
        // 更多表单项
      ],
      formData: {
        username: '',
        password: ''
        // 更多字段
      }
    };
  },
  methods: {
    submitForm(data) {
      // 处理提交逻辑
      console.log(data);
    }
  }
};
</script>

在这个例子中，BaseForm组件接收三个props：formItems、formData和submitMethod。formItems定义了表单项的列表，每个表单项包含标签文本(label)、数据属性(prop)、类型(type)和占位符(placeholder)。formData是一个包含表单数据的对象，submitMethod是父组件提供的处理表单提交的方法。当用户点击提交按钮时，会触发submitForm方法，并将表单数据作为参数传递给这个方法。