用前端的vue写出jeecgboot中from表单页面内有两个新增按钮，两个按钮新增字段不同一个新增本地，另一个新增外地，但是两个新增按钮数据存储在同一form表单内代码

<template>
<div>
<el-form :model="form" ref="form" label-width="100px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="籍贯">
<el-radio-group v-model="form.native">
<el-radio label="true">本地</el-radio>
<el-radio label="false">外地</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.native === 'true'" label="本地地址">
<el-input v-model="form.nativeAddress"></el-input>
</el-form-item>
<el-form-item v-if="form.native === 'false'" label="外地地址">
<el-input v-model="form.nonNativeAddress"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>

<script>
export default {
data() {
return {
form: {
name: '',
gender: '',
native: '',
nativeAddress: '',
nonNativeAddress: ''
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert('提交成功')
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields()
}
}
}
</script>