Element UI 表单布局：Form 和 Descriptions 组件结合使用

import { Form, Descriptions, Input, Button } from 'element-ui';

export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
        phone: '',
      }
    }
  },
  methods: {
    handleSubmit() {
      // 表单提交逻辑
    }
  },
  render() {
    return (
      <div>
        <Form ref="form" model={this.form} label-position="left" label-width="80px">
          <Form.Item label="姓名" prop="name">
            <Input v-model={this.form.name} />
          </Form.Item>
          <Form.Item label="邮箱" prop="email">
            <Input v-model={this.form.email} />
          </Form.Item>
          <Form.Item label="电话" prop="phone">
            <Input v-model={this.form.phone} />
          </Form.Item>
          <Form.Item>
            <Button type="primary" onClick={this.handleSubmit}>提交</Button>
          </Form.Item>
        </Form>
        <Descriptions title="表单项描述信息">
          <Descriptions.Item label="姓名">请输入姓名</Descriptions.Item>
          <Descriptions.Item label="邮箱">请输入邮箱</Descriptions.Item>
          <Descriptions.Item label="电话">请输入电话</Descriptions.Item>
        </Descriptions>
      </div>
    );
  }
};