vue3 表单数据回显

在Vue3中实现表单数据回显的方法有多种。其中一种常见的方法是使用响应式数据。您可以将表单数据保存在一个响应式对象中，然后在组件中使用这些数据进行回显。

首先，您需要在组件中定义一个响应式对象，来保存表单数据。可以使用`reactive`函数来创建一个响应式对象。例如，在Vue3中，您可以这样定义一个响应式对象：

const state = reactive({
  remark: '',
  dictId: 0,
  dictName: '',
  dictType: '',
  status: '0',
});

接下来，您可以通过将表单数据传递给组件的props属性来实现数据的回显。当父组件传递新的表单数据时，您可以使用`watch`函数来监听这些数据的变化，并更新响应式对象的值。例如，在Vue3中，您可以这样实现表单数据的回显：

watch(() => formData, (value) => {
  state.remark = value.remark;
  state.dictId = value.dictId;
  state.dictName = value.dictName;
  state.dictType = value.dictType;
  state.status = value.status;
}, { immediate: true, deep: true });

最后，您可以在模板中使用这些响应式数据来回显表单数据。例如，在Vue3中，您可以这样使用响应式数据来回显表单数据：

<template>
  <div>
    <label>Remark:</label>
    <input v-model="state.remark" />

    <label>Dict ID:</label>
    <input v-model="state.dictId" />

    <label>Dict Name:</label>
    <input v-model="state.dictName" />

    <label>Dict Type:</label>
    <input v-model="state.dictType" />
    <label>Status:</label>
    <input v-model="state.status" />
  </div>
</template>

通过这种方式，您可以将父组件传递的表单数据回显到子组件的输入框中。请注意，上述代码仅为示例代码，具体实现可能会根据您的项目需求而有所不同。希望对您有所帮助！