表单对象与当前行对象的 区别
在 Vue.js 应用中，当前行对象的数据与表单中的数据可能有以下区别：
1. 数据来源不同
-
当前行对象的数据：通常是从后端 API 获取的原始数据，直接映射到表格中的每一行。这些数据是只读的，用于展示和参考。
-
表单中的数据：通常是用户在编辑或新增时填写的数据，这些数据可以被修改，并且在提交表单时会被发送回后端进行保存。
2. 数据结构可能不同
-
当前行对象的数据：其结构完全取决于后端返回的数据格式，可能包含一些额外的字段或嵌套的对象。
-
表单中的数据：其结构通常是为了方便用户输入和验证而设计的，可能会对原始数据进行一定的转换和简化。
3. 数据状态不同
-
当前行对象的数据：是静态的，不会随着用户的操作而改变，除非重新从后端获取数据。
-
表单中的数据：是动态的，会随着用户的输入而实时更新。
4. 数据处理方式不同
-
当前行对象的数据：通常只需要简单的展示，不需要进行复杂的逻辑处理。
-
表单中的数据：需要进行各种验证、转换和处理，以确保数据的正确性和完整性。
示例代码说明
在你的代码中，vmList 是当前行对象的数据，而 form 是表单中的数据。
javascriptconst vmList = ref([]); // 当前行对象的数据
const form = reactive({}); // 表单中的数据
当你点击“修改”按钮时，会将当前行对象的数据复制到表单中：
javascriptfunction handleUpdate(row) {reset();const _id = row.id || ids.value;getVm(_id).then(response => {form.value = response.data; // 将当前行对象的数据复制到表单中open.value = true;title.value = "修改设备管理";});
}
在这个过程中，如果后端返回的数据结构与表单的数据结构不一致，就需要进行相应的转换。例如，如果后端返回的时间是一个字符串，而表单需要一个日期对象，就需要进行转换：
javascriptfunction handleUpdate(row) {reset();const _id = row.id || ids.value;getVm(_id).then(response => {const data = response.data;if (data.lastSupplyTime) {data.lastSupplyTime = new Date(data.lastSupplyTime);}form.value = data;open.value = true;title.value = "修改设备管理";});
}
同样，在提交表单时，也需要将表单中的数据转换为后端能够接受的格式：
javascriptfunction submitForm() {proxy.$refs["vmRef"].validate(valid => {if (valid) {if (form.value.id != null) {updateVm(form.value).then(response => {proxy.$modal.msgSuccess("修改成功");open.value = false;getList();});} else {addVm(form.value).then(response => {proxy.$modal.msgSuccess("新增成功");open.value = false;getList();});}}});
}
通过以上步骤，可以确保当前行对象的数据与表单中的数据之间的正确转换和处理。
