vue elelmentui 将几个输入框放入一个框

在ElementUI中，可以通过使用el-form组件来将多个输入框放入一个框内。el-form组件提供了表单布局和校验的功能，同时可以对表单数据进行绑定和提交。以下是一个简单的示例：

<template>
  <el-form ref="form" :model="formData" label-width="100px">
    <el-form-item label="姓名">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model.number="formData.age"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="formData.gender">
        <el-radio label="male">男</el-radio>
        <el-radio label="female">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        gender: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log(this.formData)
        } else {
          console.log('表单校验不通过')
          return false
        }
      })
    }
  }
}
</script>

在上面的示例中，el-form组件包含了三个el-form-item组件，每个el-form-item组件里面放置了一个输入框组件，最后还有一个提交按钮。el-form-item组件提供了表单项的布局和样式，同时也可以设置表单项的校验规则。在submitForm方法中，使用this.$refs.form.validate方法进行表单校验，如果通过校验，则打印表单数据。

希望对你有所帮助。