优雅实用！玩转element-ui表单组件，轻松创建和修改表单

2024-02-12 18:02:51

通过合理的配置，我们可以在几分钟内轻松创建和修改表单。这无疑为我们的开发效率提供了巨大的提升。

在日常开发中，我们经常会遇到需要创建和修改表单的情况。这些表单通常包含各种各样的字段，比如文本框、下拉列表、单选框、复选框等等。如果我们每次都需要手动编写这些字段的代码，不仅效率低下，而且容易出错。

为了解决这个问题，我们可以使用Element-UI的表单组件。Element-UI的表单组件提供了丰富的内置组件，我们可以直接使用这些组件来创建和修改表单。而且，这些组件都具有高度的灵活性，我们可以根据需要进行配置，以满足不同的业务需求。

配置表单

首先，我们需要创建一个表单配置对象。这个对象包含了表单的所有配置信息，比如表单的字段、字段的类型、字段的默认值等等。

const formConfig = {
  fields: [
    {
      name: 'username',
      label: '用户名',
      type: 'text',
      default: '',
      rules: [
        { required: true, message: '请输入用户名' },
      ],
    },
    {
      name: 'password',
      label: '密码',
      type: 'password',
      default: '',
      rules: [
        { required: true, message: '请输入密码' },
      ],
    },
  ],
};

创建表单

有了表单配置对象之后，我们就可以使用Element-UI的Form组件来创建表单了。

<template>
  <el-form :model="formData" :rules="formRules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { Form, FormItem, Input, Button } from 'element-ui';

export default {
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    [Button.name]: Button,
  },
  data() {
    return {
      formData: {},
      formRules: {
        username: [
          { required: true, message: '请输入用户名' },
        ],
        password: [
          { required: true, message: '请输入密码' },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 提交表单
        } else {
          // 表单验证失败
        }
      });
    },
  },
};
</script>

修改表单

如果我们需要修改表单，只需要修改表单配置对象即可。修改后的表单配置对象如下：

const formConfig = {
  fields: [
    {
      name: 'username',
      label: '用户名',
      type: 'text',
      default: '',
      rules: [
        { required: true, message: '请输入用户名' },
      ],
    },
    {
      name: 'password',
      label: '密码',
      type: 'password',
      default: '',
      rules: [
        { required: true, message: '请输入密码' },
      ],
    },
    {
      name: 'email',
      label: '邮箱',
      type: 'email',
      default: '',
      rules: [
        { required: true, message: '请输入邮箱' },
      ],
    },
  ],
};

然后，我们需要重新创建表单。

<template>
  <el-form :model="formData" :rules="formRules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { Form, FormItem, Input, Button } from 'element-ui';

export default {
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    [Button.name]: Button,
  },
  data() {
    return {
      formData: {},
      formRules: {
        username: [
          { required: true, message: '请输入用户名' },
        ],
        password: [
          { required: true, message: '请输入密码' },
        ],
        email: [
          { required: true, message: '请输入邮箱' },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 提交表单
        } else {
          // 表单验证失败
        }
      });
    },
  },
};
</script>