请你扮演一个高级前端,帮我写一个el-descriptions和el-form的结合表单,将el-descriptions放在表单中
时间: 2024-01-13 08:19:24 浏览: 88
好的,以下是示例代码,将 el-descriptions 放在了 el-form 中:
```
<template>
<el-form ref="form" :model="formData" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="性别" prop="gender">
<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-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="出生日期" prop="birthday">
<el-date-picker v-model="formData.birthday" type="date"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职业" prop="occupation">
<el-input v-model="formData.occupation"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="自我介绍" prop="introduction">
<el-input type="textarea" v-model="formData.introduction"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item>
<el-descriptions :column="1">
<el-descriptions-item label="姓名">{{ formData.name }}</el-descriptions-item>
<el-descriptions-item label="性别">{{ formData.gender === 'male' ? '男' : '女' }}</el-descriptions-item>
<el-descriptions-item label="出生日期">{{ formData.birthday }}</el-descriptions-item>
<el-descriptions-item label="职业">{{ formData.occupation }}</el-descriptions-item>
<el-descriptions-item label="自我介绍">{{ formData.introduction }}</el-descriptions-item>
</el-descriptions>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
gender: '',
birthday: '',
occupation: '',
introduction: ''
}
};
}
};
</script>
```
这段代码将 el-descriptions 放在了 el-form 的最后一个 el-row 中,以便在表单下方展示同样的内容。注意,这里也使用了 prop 属性和表单验证功能,以确保用户正确地填写了表单。同时,为了将 el-descriptions 放在表单中,我们将 el-form-item 的 label 属性去掉了。
阅读全文