标签：index Vue 个人资料 color formData Element padding UI
效果图：
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人资料编辑 - Vue + Element UI</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f7fc;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 15px;
font-size: 24px;
}
.container {
width: 80%;
margin: 30px auto;
padding: 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-weight: bold;
}
.footer-buttons {
display: flex;
justify-content: flex-end;
gap: 20px;
}
.footer-buttons button {
padding: 10px 20px;
}
</style>
</head>
<body>
<header>
个人资料编辑
</header>
<div id="app" class="container">
<el-form ref="form" :model="formData" label-width="120px" @submit.prevent="handleSubmit">
<!-- 个人基本信息 -->
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<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-form-item label="出生日期" prop="dob">
<el-date-picker v-model="formData.dob" type="date" placeholder="选择出生日期"></el-date-picker>
</el-form-item>
<el-form-item label="头像" prop="avatar">
<el-upload
class="avatar-uploader"
action="#"
list-type="picture-card"
:file-list="avatarList"
:on-preview="handlePreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<!-- 联系方式管理 -->
<el-form-item label="联系方式">
<div v-for="(contact, index) in formData.contacts" :key="index" class="form-group">
<el-input v-model="contact.value" :placeholder="'请输入联系方式 ' + (index + 1)" style="width: 80%; margin-right: 10px;"></el-input>
<el-button type="danger" icon="el-icon-delete" @click="removeContact(index)">删除</el-button>
</div>
<el-button type="primary" icon="el-icon-plus" @click="addContact">添加联系方式</el-button>
</el-form-item>
<!-- 地址管理 -->
<el-form-item label="地址">
<div v-for="(address, index) in formData.addresses" :key="index" class="form-group">
<el-input v-model="address.value" :placeholder="'请输入地址 ' + (index + 1)" style="width: 80%; margin-right: 10px;"></el-input>
<el-button type="danger" icon="el-icon-delete" @click="removeAddress(index)">删除</el-button>
</div>
<el-button type="primary" icon="el-icon-plus" @click="addAddress">添加地址</el-button>
</el-form-item>
<!-- 兴趣爱好 -->
<el-form-item label="兴趣爱好">
<el-checkbox-group v-model="formData.interests">
<el-checkbox label="游泳"></el-checkbox>
<el-checkbox label="读书"></el-checkbox>
<el-checkbox label="旅游"></el-checkbox>
<el-checkbox label="编程"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- 底部按钮 -->
<div class="footer-buttons">
<el-button type="primary" @click="saveProfile">保存</el-button>
<el-button type="default" @click="resetForm">重置</el-button>
</div>
</el-form>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
formData: {
name: '',
gender: 'male',
dob: '',
avatar: '',
contacts: [],
addresses: [],
interests: []
},
avatarList: []
};
},
methods: {
// 添加联系方式
addContact() {
this.formData.contacts.push({ value: '' });
},
// 删除联系方式
removeContact(index) {
this.formData.contacts.splice(index, 1);
},
// 添加地址
addAddress() {
this.formData.addresses.push({ value: '' });
},
// 删除地址
removeAddress(index) {
this.formData.addresses.splice(index, 1);
},
// 处理头像上传
handlePreview(file) {
console.log("Preview:", file);
},
handleRemove(file, fileList) {
console.log("Remove:", file, fileList);
},
// 保存资料
saveProfile() {
this.$message({
message: '个人资料已保存！',
type: 'success'
});
console.log('保存的个人资料:', this.formData);
},
// 重置表单
resetForm() {
this.$confirm('确认重置所有内容吗？', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$refs.form.resetFields();
}).catch(() => {
this.$message.info('取消重置');
});
}
}
});
</script>
</body>
</html>
标签：index,
Vue,
个人资料,
color,
formData,
Element,
padding,
UI
From： https://blog.csdn.net/sky10100100/article/details/144308628