vue3 在弹窗中使用el-form表单编辑回显问题

问题描述

在使用el-dialog嵌套el-form是，点击添加数据没有问题，点击修改数据时，el-form回显不出来。

html代码

<el-dialog :title="form.id?'修改材料':'新增材料'" v-model="show" width="50%" :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="材料名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入"></el-input>
      </el-form-item>
       // .... 其它数据
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" type="primary" @click="show = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>

js代码

 export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dialogData: {
      type: Object,
      default: () => { }
    }
  },
  emits: ['update:visible'],
  setup(props, context) {
    const state = reactive({
      show: false,
      form: {
        name: '',
        // ...
      }
    })
 
   // ...

    watch(() => props.dialogData, val => {
      state.form = { ...val }
      console.log(state.form) // 此处打印显示 form有值 但是无法回显
    }, { deep: true })
    
    // ...
   
    return {
      ...toRefs(state),
    }
  },
})

尝试各种解决办法

1、怀疑是生命周期渲染问题 ，添加nextTick

     nextTick(()=>{
       state.form = { ...val }
       console.log(state.form) // 打印结果没有问题，还是无法回显
     })

2、在el-dialog 的open回调函数中赋值，问题也是一样。
打印结果发现是一个对象 包含了el-form的所有属性，意识是字段名冲突了，检查字段名没有问题。

3、再一次翻了一下vue3官网，发现了以前没有理解的一点。

 // 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref。
 // 以前只是图方便使用toRefs,将声明的属性转化成类似于vue2的方式。
 
 const state = reactive({
   foo: 1,
   bar: 2
 })

 const stateAsRefs = toRefs(state)
 /*
 Type of stateAsRefs:

 {
   foo: Ref<number>,
   bar: Ref<number>
 }
*/

// ref 和 原始property “链接”
 state.foo++
 console.log(stateAsRefs.foo.value) // 2

 stateAsRefs.foo.value++
 console.log(state.foo) // 3
 

修改

export default defineComponent({
 props: {
   visible: {
     type: Boolean,
     default: false,
   },
   dialogData: {
     type: Object,
     default: () => { }
   }
 },
 emits: ['update:visible'],
 setup(props, context) {
   const state = reactive({
     show: false,
     form: {
       name: '',
       // ...
     }
   })

  // ...

   watch(() => props.dialogData, val => {
     state.form = { ...val }
     console.log(state.form) // 此处打印显示 form有值 但是无法回显
   }, { deep: true })
   
   // ...
  
   return {
     ...toRefs(state), // 相当于显示的声明了 const form = ref()
   // 由于el-form声明了ref="form",导致state中声明的form被覆盖，修改ref="form1"，问题解决
   }
 },
})

感受

多看文档！！！