Vue3使用Cascader 级联选择器如何获取值并提交信息

我写了一个用户对象，有address地址字段，我怎么将用户选择的级联数据selectedValue值传给address，并将对象返回给后端，核心代码实现了该问题。

 <script>

核心代码：

//获取住址并更新给addresslet selectedValue = ref([]);// 监听 selectedValue 的变化watch(selectedValue, (newValue) => {formData.address = newValue.join(",");});const handleChange = (value) => {console.log(`value==${value}`);// 更新 selectedValue 的值selectedValue.value = value;};

js完整代码

<script >
import { reactive, ref, watch } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";export default {setup() {const router = useRouter();//注册用户表单信息const formData = reactive({username: "",password: "",tel: "",gender: "",age: null,birthday: "",address: "",});//获取住址并更新给addresslet selectedValue = ref([]);// 监听 selectedValue 的变化watch(selectedValue, (newValue) => {formData.address = newValue.join(",");});const handleChange = (value) => {console.log(`value==${value}`);// 更新 selectedValue 的值selectedValue.value = value;};//住址(固定信息)const options = [{value: "河南省",label: "河南省",children: [{value: "开封市",label: "开封市",children: [{value: "兰考县",label: "兰考县",},{value: "尉氏县",label: "尉氏县",},{value: "龙亭区",label: "龙亭区",},{value: "禹王台区",label: "禹王台区",},],},{value: "郑州市",label: "郑州市",children: [{value: "中原区",label: "中原区",},{value: "二七区",label: "二七区",},{value: "管城回族区",label: "管城回族区",},{value: "金水区",label: "金水区",},],},],},{value: "广东省",label: "广东省",children: [{value: "深圳市",label: "深圳市",children: [{value: "福田区",label: "福田区",},{value: "龙岗区",label: "龙岗区",},{value: "南山区",label: "南山区",},{value: "宝安区",label: "宝安区",},],},{value: "广州市",label: "广州市",children: [{value: "海珠区",label: "海珠区",},{value: "天河区",label: "天河区",},{value: "荔湾区",label: "荔湾区",},{value: "越秀区",label: "越秀区",},],},],},];const submitForm = async () => {try {const response = await axios.post("/api/saveUser", formData, {headers: {"Content-Type": "application/json", // 根据后端需要的类型设置},});if (response.data.code > 0) {router.push({ name: "Login" }); // 成功时跳转到登录页} else if (response.data.code === -2) {alert(response.data.desc); // 处理特定错误码，弹出警告} else {alert("注册失败，请重试！"); // 其他错误情况}} catch (error) {alert("注册失败，请重试！"); // 捕获异常情况}};return {formData,submitForm,options,handleChange,selectedValue,};},
};
</script>

<template> 

 <!-- 级联选择器 --><el-cascaderv-model="selectedValue":options="options"@change="handleChange"/>

注册页面完整代码

<template><div class="register-form"><h2>用户注册</h2><form @submit.prevent="submitForm"><div class="form-group"><label for="username">用户名</label><input type="text" id="username" v-model="formData.username" required /></div><div class="form-group"><label for="password">密码</label><inputtype="password"id="password"v-model="formData.password"required/></div><div class="form-group"><label for="tel">手机号</label><input type="text" id="tel" v-model="formData.tel" required /></div><div class="form-group"><label>性别</label><label><input type="radio" v-model="formData.gender" value="男" />男</label><label><input type="radio" v-model="formData.gender" value="女" />女</label></div><div class="form-group"><label for="age">年龄</label><input type="number" id="age" v-model.number="formData.age" required /></div><div class="form-group"><label for="birthday">出生日期</label><input type="date" id="birthday" v-model="formData.birthday" required /></div><div class="form-group"><label for="address">住址</label><!-- 级联选择器 --><el-cascaderv-model="selectedValue":options="options"@change="handleChange"/><!-- <textareaid="address"v-model="formData.address"rows="3"required></textarea> --></div><button type="submit">注册</button></form></div>
</template>
<script >
import { reactive, ref, watch } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";export default {setup() {const router = useRouter();//注册用户表单信息const formData = reactive({username: "",password: "",tel: "",gender: "",age: null,birthday: "",address: "",});//获取住址并更新给addresslet selectedValue = ref([]);// 监听 selectedValue 的变化watch(selectedValue, (newValue) => {formData.address = newValue.join(",");});const handleChange = (value) => {console.log(`value==${value}`);// 更新 selectedValue 的值selectedValue.value = value;};//住址(固定信息)const options = [{value: "河南省",label: "河南省",children: [{value: "开封市",label: "开封市",children: [{value: "兰考县",label: "兰考县",},{value: "尉氏县",label: "尉氏县",},{value: "龙亭区",label: "龙亭区",},{value: "禹王台区",label: "禹王台区",},],},{value: "郑州市",label: "郑州市",children: [{value: "中原区",label: "中原区",},{value: "二七区",label: "二七区",},{value: "管城回族区",label: "管城回族区",},{value: "金水区",label: "金水区",},],},],},{value: "广东省",label: "广东省",children: [{value: "深圳市",label: "深圳市",children: [{value: "福田区",label: "福田区",},{value: "龙岗区",label: "龙岗区",},{value: "南山区",label: "南山区",},{value: "宝安区",label: "宝安区",},],},{value: "广州市",label: "广州市",children: [{value: "海珠区",label: "海珠区",},{value: "天河区",label: "天河区",},{value: "荔湾区",label: "荔湾区",},{value: "越秀区",label: "越秀区",},],},],},];const submitForm = async () => {try {const response = await axios.post("/api/saveUser", formData, {headers: {"Content-Type": "application/json", // 根据后端需要的类型设置},});if (response.data.code > 0) {router.push({ name: "Login" }); // 成功时跳转到登录页} else if (response.data.code === -2) {alert(response.data.desc); // 处理特定错误码，弹出警告} else {alert("注册失败，请重试！"); // 其他错误情况}} catch (error) {alert("注册失败，请重试！"); // 捕获异常情况}};return {formData,submitForm,options,handleChange,selectedValue,};},
};
</script><style scoped>
.register-form {max-width: 400px;margin: 0 auto;padding: 20px;border: 1px solid #ccc;border-radius: 5px;
}.form-group {margin-bottom: 15px;
}label {display: block;margin-bottom: 5px;
}input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea {width: 100%;padding: 8px;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;
}button {display: block;width: 100%;padding: 10px;font-size: 16px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background-color: #0056b3;
}
</style>