Element Plus组件Form表单Table表格二次封装的完整过程

让我来为你详细讲解Element Plus组件Form表单Table表格二次封装的完整过程，并且提供两条示例以便更好地理解。

1.了解Form和Table组件

在进行二次封装之前，我们需要对Form和Table组件有一个初步的了解。

Form 组件

Form是Input、Radio、Select等表单控件的容器，同时也支持栅格布局，可以轻松地实现Form表单页面的开发。

Table 组件

Table是用于展示多行数据的组件，可以自定义表头、内容和样式，并提供分页等功能。

2.准备工作

在开始我们的二次封装之前，我们需要进行一些准备工作。首先我们需要确保已经安装了Element Plus组件库并成功导入需要使用的组件。其次，我们需要定义一些公共的配置项，让我们的代码更加简洁易用，提高复用性。比如：

// 公共的 Form 配置项
export const formConfig = {
  size: 'small',
  labelWidth: '80px',
};
// 公共的 Table 配置项
export const tableConfig = {
  size: 'small',
  stripe: true,
  border: true,
  fit: true,
  highlightCurrentRow: true,
};

3.二次封装过程

3.1 Form 组件

在 Form 组件方面，我们可以对它进行二次封装来达到简化代码、提高复用性等目的，例如为其添加初始值等。以下是一个示例：

<template>
  <el-form
    :model="formData"
    :rules="formRules"
    :size="formSize"
    :label-width="formLabelWidth"
    ref="form">
    <slot></slot>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { formConfig } from '@/config';

export default {
  name: 'CustomForm',
  props: {
    formData: {
      type: Object,
      required: true,
    },
    formRules: {
      type: Object,
      required: false,
    },
    formSize: {
      type: String,
      default: formConfig.size,
      required: false,
    },
    formLabelWidth: {
      type: String,
      default: formConfig.labelWidth,
      required: false,
    },
    onSubmit: {
      type: Function,
      required: false,
    },
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.onSubmit && this.onSubmit(this.formData);
        }
      });
    },
  },
};
</script>

3.2 Table 组件

在 Table 组件方面，我们也可以对它进行二次封装来达到简化代码、提高复用性等目的。以下是一个示例：

<template>
  <el-table
    :data="tableData"
    :height="tableHeight"
    :size="tableSize"
    :stripe="tableStripe"
    :border="tableBorder"
    :fit="tableFit"
    :highlight-current-row="tableHighlightCurrentRow"
    ref="table">
    <slot></slot>
  </el-table>
</template>
<script>
import { tableConfig } from '@/config';

export default {
  name: 'CustomTable',
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    tableHeight: {
      type: [String, Number],
      default: '',
      required: false,
    },
    tableSize: {
      type: String,
      default: tableConfig.size,
      required: false,
    },
    tableStripe: {
        type: Boolean,
        default: tableConfig.stripe,
        required: false,
    },
    tableBorder: {
      type: Boolean,
      default: tableConfig.border,
      required: false,
    },
    tableFit: {
      type: Boolean,
      default: tableConfig.fit,
      required: false,
    },
    tableHighlightCurrentRow: {
      type: Boolean,
      default: tableConfig.highlightCurrentRow,
      required: false,
    },
  },
};
</script>

示例说明

示例一

我们可以将封装好的Form和Table组件用于一个简单的用户信息展示页面：

<template>
  <custom-form :form-data="formData" @submit="handleSubmit">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="formData.gender">
        <el-radio label="男">男</el-radio>
        <el-radio label="女">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input-number v-model="formData.age" placeholder="请输入年龄"></el-input-number>
    </el-form-item>
    <custom-table :table-data="tableData">
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
    </custom-table>
  </custom-form>
</template>
<script>
import CustomForm from './CustomForm.vue';
import CustomTable from './CustomTable.vue';

export default {
  name: 'User',
  components: {
    CustomForm,
    CustomTable,
  },
  data() {
    return {
      formData: {
        name: '',
        gender: '',
        age: '',
      },
      formRules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'change' },
          { min: 2, max: 5, message: '姓名长度在 2 到 5 个字符', trigger: 'blur' },
        ],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
      },
      tableData: [],
    };
  },
  methods: {
    handleSubmit(formData) {
      this.tableData.push(formData);
    },
  },
};
</script>

在该示例中，我们使用了封装好的CustomForm和CustomTable组件，同时将它们组合在一起形成了一个用户信息展示页面。在CustomForm组件中，我们使用了插槽来注入表单项，使得代码更加简洁易读。同时，我们在CustomForm组件中包含了一个默认的提交按钮，并通过监听提交事件来获得表单提交的数据。在CustomTable组件中，我们同样使用了插槽来注入表格列，使得代码更加简洁易读，同时通过prop来指定表格数据源中需要展示的字段信息。

示例二

我们可以将封装好的Form和Table组件用于一个简单的订单管理页面：

<template>
  <div>
    <custom-form :form-data="formData" :form-rules="formRules" @submit="handleSubmit">
      <el-form-item label="订单编号" prop="orderId">
        <el-input v-model="formData.orderId" placeholder="请输入订单编号"></el-input>
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="formData.orderStatus" placeholder="请选择">
          <el-option label="待付款" value="waitPay"></el-option>
          <el-option label="待发货" value="waitSend"></el-option>
          <el-option label="待收货" value="waitingReceipt"></el-option>
          <el-option label="已完成" value="completed"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单时间" prop="createTime">
        <el-date-picker v-model="formData.createTime" type="datetime" placeholder="请选择下单时间"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="handleAdd">新增</el-button>
      </el-form-item>
    </custom-form>

    <custom-table :table-data="tableData">
      <el-table-column
        prop="orderId"
        label="订单编号">
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        label="订单状态">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="下单时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </custom-table>
  </div>
</template>
<script>
import CustomForm from './CustomForm.vue';
import CustomTable from './CustomTable.vue';

export default {
  name: 'Order',
  components: {
    CustomForm,
    CustomTable,
  },
  data() {
    return {
      formData: {
        orderId: '',
        orderStatus: '',
        createTime: '',
      },
      formRules: {
        orderId: [{ required: true, message: '请填写订单编号', trigger: 'blur' }],
        orderStatus: [{ required: true, message: '请选择订单状态', trigger: 'change' }],
        createTime: [{ required: true, message: '请选择下单时间', trigger: 'change' }],
      },
      tableData: [
        {
          orderId: '0000001',
          orderStatus: 'waitPay',
          createTime: '2021-10-01 10:50:00',
        },
        {
          orderId: '0000002',
          orderStatus: 'waitSend',
          createTime: '2021-10-02 12:00:00',
        },
        {
          orderId: '0000003',
          orderStatus: 'completed',
          createTime: '2021-10-03 10:50:00',
        },
      ],
    };
  },
  methods: {
    handleSubmit(formData) {
      console.log(formData);
    },
    handleSearch() {
      console.log('search');
    },
    handleAdd() {
      console.log('add');
    },
    handleEdit(row) {
      console.log('edit', row);
    },
    handleDelete(row) {
      console.log('delete', row);
    },
  },
};
</script>

在该示例中，我们同样使用了封装好的CustomForm和CustomTable组件，并通过插槽来注入表单项和表格列。在CustomForm组件中，我们增加了一个查询和新增按钮，并通过组件事件来监听按钮的点击操作。在CustomTable组件中，我们同样增加了编辑和删除按钮，并通过表格插槽来进行对表格的自定义操作。