给Web 表单组件带来无限可能：二次封装 Vue+Element-UI TForm 表单

前端

2023-11-14 13:26:17

二次封装的前世今生

在前端开发过程中，表单组件是必不可少的。但是，原生 HTML 表单组件往往无法满足开发者的需求，因此出现了各种各样的表单组件库。其中，Element-UI 就是一个非常流行的表单组件库，它提供了丰富的表单组件，可以满足大部分开发需求。

不过，Element-UI 的表单组件也有其局限性。例如，它不支持动态增减表单项、自定义表单布局等功能。为了解决这些问题，我们需要对 Element-UI 的表单组件进行二次封装。

二次封装的精彩内容

二次封装后的 TForm 表单组件，具有以下几个特点：

灵活性强： TForm 表单组件支持动态增减表单项、自定义表单布局等功能，可以满足各种复杂的需求。
可扩展性好： TForm 表单组件提供了丰富的扩展机制，允许开发人员轻松地集成其他组件。
可维护性高： TForm 表单组件采用模块化设计，便于维护和升级。

最佳实践：动态增减表单项

我们以动态增减表单项为例，来说明如何使用 TForm 表单组件。

首先，在 HTML 中引入 TForm 表单组件：

<div id="app">
  <t-form ref="formRef">
    <t-form-item label="姓名">
      <t-input v-model="formData.name" />
    </t-form-item>
    <t-form-item label="年龄">
      <t-input v-model="formData.age" />
    </t-form-item>
    <t-form-item label="性别">
      <t-radio-group v-model="formData.gender">
        <t-radio label="男" value="male" />
        <t-radio label="女" value="female" />
      </t-radio-group>
    </t-form-item>
  </t-form>
  <button @click="addFormItem">添加表单项</button>
  <button @click="removeFormItem">删除表单项</button>
</div>

然后，在 Vue 实例中，定义了 formData 数据对象和 addFormItem、removeFormItem 两个方法：

export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        gender: ''
      }
    }
  },
  methods: {
    addFormItem() {
      this.$refs.formRef.addFormItem({
        label: '爱好',
        prop: 'hobby',
        component: 't-input'
      })
    },
    removeFormItem() {
      this.$refs.formRef.removeFormItem('hobby')
    }
  }
}