【Dv3admin】下拉API接口传多个值到form

表单操作中常见需求之一是在下拉选择时同步传递和处理多个字段，提升数据验证和业务逻辑的便捷性。实际开发环境下，数据交互常涉及到多项信息同步写入，直接影响业务流程的顺畅与正确。

本文介绍一种在下拉选择学生信息时，如何一次性将学号和姓名等多个参数同时写入表单，实现表单数据的自动同步与提交，适用于需要处理多字段数据验证的场景。

文章目录

• 应用场景
• 实现方式
• 总结

应用场景

在下拉选择数据的时候往往根据需要需要传递2个值来进行信息的验证，例如在下拉选择学生信息的时候需要验证 id_student 和 name_student 的时候，这里为了方便只写一次下拉选择传递2个参数。

实现方式

需要对当前表单form数据进行传递修改。

一个学生信息选择和提交的表单功能，主要用于场景中需要用户选择尚未入住的学生，并将所选学生的关键信息（包括学生ID和姓名）同步到表单数据中，方便后续处理和数据提交。代码通过 dict-select 组件，结合远程数据源动态加载学生列表，支持筛选和清除，提升了用户选择的灵活性。用户在组件聚焦时会触发一次数据加载，保证列表内容的实时性。当学生被选中后，组件会自动将所选学生的 ID 和姓名分别写入表单的对应字段，保证数据同步。学生姓名字段作为隐藏项，仅用于数据传递和提交，不在界面显示或表格列中呈现。整体上，这段代码让学生选择与数据处理过程变得自动化、简洁，并兼容复杂的业务需求，比如远程检索、自动赋值和隐藏数据传递等，适用于需要动态选择和提交学生信息的管理系统场景。

// 让用户选择学生，选中后同时写入 id_student 和 name_student
student_info: {
title: '普通选择',
type: 'dict-select',
dict: dict({
url: '/api/AoYuExamManagementService/Accommodation/PhoneStore/select_un_check_in/',
value: 'id_student', // 对应 form.id_student
label: 'name_student' // 对应 form.name_student
}),
form: {
helper: '使用内置 dict-select 自动加载',
component: {
filterable: true,
clearable: true,
placeholder: '请选择学生',
remote: true, // 打开远程模式
// 聚焦时触发一次加载
on: {
focus({componentRef}) {
componentRef.dict.getData()
},
// FsDictSelect 专属事件，拿到完整 {value,label}
selectedChange({form, $event}) {
// console.log($event)
form.id_student = $event.id_student;
form.name_student = $event.name_student;
// console.log(form)
}
}
}
}
},
// 隐藏字段，用来接收并提交 name_student
name_student: {
title: '学生姓名',
type: 'text',
form: {show: false},
column: {show: false}
},

总结

多参数同步写入下拉表单不仅简化了用户操作流程，还提升了数据处理的准确率，避免了重复选择和信息遗漏的问题。在表单设计和数据交互场景中，这种方法能有效增强前后端的协同效率，便于后续数据处理和业务逻辑扩展。

多字段同步传递方法可推广到更多复杂场景，如多维度信息录入、批量数据处理和动态表单配置，为提升开发效率和用户体验提供了可靠的技术支撑。未来，表单组件的灵活性和智能化处理能力将成为数据驱动应用的重要发展方向。