element plus中form组件一个form-item对应多个框的解决方案

作者：System 时间：2024年08月27日分类：所有,elementui 字数：862

这篇文章距离上次修改已过220天，其中的内容可能已经有所变动。

在Element Plus中，如果你想要在一个<el-form-item>中展示多个输入框（或其他表单控件），你可以简单地在<el-form-item>内部添加这些控件。这里提供一个简单的例子：

<template>
  <el-form>
    <el-form-item label="姓名">
      <el-input v-model="form.firstName" placeholder="请输入名字"></el-input>
      <el-input v-model="form.lastName" placeholder="请输入姓氏"></el-input>
    </el-form-item>
    <el-form-item label="联系方式">
      <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  firstName: '',
  lastName: '',
  email: '',
  phone: '',
});
</script>

在这个例子中，我们创建了一个含有姓名（名字和姓氏）和联系方式（邮箱和电话）的表单项。这些表单项都包裹在<el-form-item>标签内，并且它们共享一个标签"label"。这样的布局可以使得用户界面更加整洁，用户可以一目了然地知道每个输入框的作用。

element plus中form组件一个form-item对应多个框的解决方案

评论已关闭

推荐阅读