极客观点
项目管理
HarmonyOS
希望实现性别这一栏默认值为后端输入的性别，用户可以在原有的基础上修改，后端传过来的性别字段为枚举类型，请问如何实现下拉选择菜单结合if判断设置默认选项？（使用vue框架和ant design vue组件）
<template>
<layout>
<div id="layout-inner">
<a-breadcrumb style="margin:0;margin-top:10px;margin-left:16px;text-align: left">
<a-breadcrumb-item>个人中心</a-breadcrumb-item>
<a-breadcrumb-item>查看个人信息</a-breadcrumb-item>
</a-breadcrumb>
<a-layout-content
:style="{ margin: '13px 16px', padding: '24px', background: '#fff', minHeight: '520px' }"
>
<div id="content">
<div id="personalInfo">
<span class="InfoTitle">
个人信息
</span>
<button class="changeInfo">修改信息</button>
<button class="changePassword" @click="showModal">修改密码</button>
<a-modal v-model="visible" title="修改密码">
<a-form-model ref="changePasswordForm" :model="changePasswordForm.form" :rules="changePasswordForm.rules">
<a-form-model-item label="新密码" prop="newPassword">
<a-input v-model="changePasswordForm.form.newPassword" type="password" placeholder="请设置字符串长度为6~8位的密码"/>
</a-form-model-item>
<a-form-model-item label="确认密码" prop="confirmPassword">
<a-input v-model="changePasswordForm.form.confirmPassword" type="password" />
</a-form-model-item>
</a-form-model>
<template slot="footer">
<a-button @click="resetForm('changePasswordForm')">重置</a-button>
<a-button type="primary" @click="changePassword(changePasswordForm.form.newPassword)">提交</a-button>
</template>
</a-modal>
<div id="personalInfoContent">
<div id="formPart">
<a-form-model ref="infoForm"
:model="infoForm.form"
:rules="infoForm.rules"
:style="{marginTop:'10px'}"
:label-col="layout.labelCol"
:wrapper-col="layout.wrapperCol"
>
<a-form-model-item label="姓名" ref="userName" prop="userName" class="formItem">
<a-input v-model="infoForm.form.userName" type="text">
</a-input>
</a-form-model-item>
<a-form-model-item label="手机号码" ref="userPhone" prop="userPhone" class="formItem">
<a-input v-model="infoForm.form.userPhone" type="text">
</a-input>
</a-form-model-item>
<a-form-model-item label="用户角色" ref="userRole" prop="userRole" class="formItem">
<!-- <a-input v-model="infoForm.form.userRole" disabled>-->
<!-- efhnwij-->
<div v-if="this.identity===0">团队用户</div>
<div v-if="this.identity===1">管理员</div>
<!-- </a-input>-->
</a-form-model-item>
<!-- <a-form-model-item label="学号" ref="userId" prop="userId" class="formItem">-->
<!-- <a-input v-model="infoForm.form.userId" type="text" >-->
<!-- </a-input>-->
<!-- </a-form-model-item>-->
<a-form-model-item label="邮箱" ref="userEmail" prop="userEmail" class="formItem">
<a-input v-model="infoForm.form.userEmail" type="text" >
</a-input>
</a-form-model-item>
<a-form-model-item label="性别" ref="userSex" prop="userSex" class="formItem">
<a-select v-model="infoForm.form.userSex" :style="{minWidth:'100px'}">
<a-select-option value='1'>
男
</a-select-option>
<a-select-option value='0'>
女
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="学院" rf="academy" prop="academy" class="formItem">
<a-input v-model="infoForm.form.academy" type="text">
</a-input>
</a-form-model-item>
<a-form-model-item label="专业" ref="profession" prop="profession" class="formItem">
<a-input v-model="infoForm.form.profession" type="text" >
</a-input>
</a-form-model-item>
<a-form-model-item label="年级" ref="userClass" prop="userClass" class="formItem">
<a-input v-model="infoForm.form.userClass" type="text">
</a-input>
</a-form-model-item>
<a-form-model-item label="岗位" ref="post" prop="post" class="formItem">
<a-select v-model="infoForm.form.post" :style="{minWidth:'100px'}">
<a-select-option value="0">
前端
</a-select-option>
<a-select-option value="1">
后端
</a-select-option>
<a-select-option value="2">
其他
</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
</div>
<div id="avatarPart">
<a-form-model-item label="头像" :style="{display:'flex'}">
<a-upload
name="file"
list-type="picture-card"
:show-upload-list="false"
class="avatar-uploader"
action="/apis/user/upload"
:before-upload="beforeUpload"
@change="handleChange"
>
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
<div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text">
上传
</div>
</div>
</a-upload>
</a-form-model-item>
</div>
</div>
<a-form-model-item :wrapperCol="itemWrapper" :style="{textAlign:'center'}">
<a-button
:style="{borderColor:'#79A0F1',color:'#79A0F1',marginRight:'30px'}"
type="submit"
@click="save">
保存
</a-button>
<a-button
:style="{borderColor:'#79A0F1',color:'#79A0F1',marginRight:'30px'}"
@click="resetForm('infoForm') ">
重置
</a-button>
</a-form-model-item>
</div>
</div>
</a-layout-content>
</div>
</layout>
</template>
<script>
import { mapState } from 'vuex'
import {validMobile} from "@/utils/validate";
import {validEmail} from "@/utils/validate";
import layout from '@/layout/index'
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
export default {
data(){
const validateMobile = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入手机号码'))
}
if (!validMobile(value)) {
return callback(new Error('手机号码格式不正确'))
}
callback()
}
const validateEmail = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入邮箱'))
}
if (!validEmail(value)) {
return callback(new Error('邮箱格式不正确'))
}
callback()
}
const validateConfirmPassword= (rule, value, callback) => {
if (value === '') {
return callback(new Error('请再次输入密码'));
} else if (value !== this.changePasswordForm.form.newPassword) {
return callback(new Error("前后密码输入不一致"));
} else {
callback();
}
};
return {
visible:false,
changePasswordForm:{
form:{
newPassword:'',
confirmPassword:'',
},
rules:{
newPassword:[{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 8, message: '密码格式不正确', trigger: 'blur' },],
confirmPassword: [{ required: true, message: "请再次输入密码", trigger: "blur" },
{validator: validateConfirmPassword, trigger: 'blur'}]
},
},
infoForm: {
form:{
userName:this.$store.getters.userName,
userPhone:this.$store.getters.userPhone,
userRole:null,
userEmail:this.$store.getters.userEmail,
userSex:null,
profession: this.$store.getters.profession,
userClass:this.$store.getters.userClass,
academy:this.$store.getters.academy,
post:this.$store.getters.post,
},
rules: {
userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
userPhone: [
{
required: true,
trigger: "blur",
validator:validateMobile
},
],
userId: [{ required: true, message: "请输入学号", trigger: "blur" }],
userEmail: [
{
required: true,
trigger: "blur",
validator:validateEmail
},
],
userSex: [{ required: true, message: "请选择性别", trigger: 'change'}],
profession: [{ required: true, message: "请输入专业", trigger: "blur" }],
userClass: [{ required: true, message: "请输入班级", trigger: "blur" }],
academy: [{ required: true, message: "请输入学院", trigger: "blur" }],
post: [{ required: true, message: "请选择岗位", trigger: 'change'}],
},
},
layout: {
labelCol: { span: 3 },
wrapperCol: { span: 6},
},
itemWrapper: { span: 24},
// 文件上传
loading: false,
imageUrl: ''
};
},
components:{
layout
},
computed: {
...mapState({
token: state => state.token,
identity:state => state.identity
}),
},
mounted() {
// console.log('接收到的路由参数', this.$route.params.data)
// console.log('接收到的路由参数', this.$route.query.data)
console.log("this.$store.getters.userSex:",this.$store.getters.userSex)
this.infoForm.form.userSex=this.$store.getters.userSex
console.log("this.infoForm.form.userSex:",this.infoForm.form.userSex)
},
methods:{
save(){
console.log("我要修改信息")
console.log("我重新输入的名字：",this.infoForm.form.userName)
console.log("我重新输的手机号：",this.infoForm.form.userPhone)
},
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 1;
if (!isLt2M) {
this.$message.error('图片大小应该小于1MB');
}
return isLt2M;
},
handleChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
// Get this url from response in real world.
console.log('upload', info)
this.registerForm.form.fileId = info.file.response.data.fileId
getBase64(info.file.originFileObj, imageUrl => {
this.imageUrl = imageUrl;
this.loading = false;
});
}
},
showModal() {
this.visible = true;
},
changePassword(newPassword){
console.log("新密码："+newPassword)
alert("新密码："+newPassword)
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
changeInfo(){
console.log("要修改个人信息！")
}
}
}
</script>
<style scoped>
</style>
请赐教，不胜感激。
html5
检查后端传回来的数据类型，如果是数字类型 :value='1'