A redefinição do formulário pop-up vue3 + element-plus (resetFields) falha e solução inválida

Descrição do cenário do problema

需求:一个弹框同时实现新增、修改功能。点击修改时赋值到弹框里面的表单,点击新增弹框里面表单都是无值

问题:当进入页面先点击修改再点新增,弹框里面的值无法清空。而先点击新增再点修改则不会出现这个问题

分析:经过多方资料查找,得出结论:此问题的导致原因是与Form绑定的Model对象第一次赋值有关系
即在哪个阶段被赋值的,赋值的是什么,reset之后就会恢复成这个阶段赋值的内容

Link de referência

solução

Pré-condições

  1. el-form deve definir ref
    import {
          
           ref } from 'vue'
    const dataFormRef = ref()
    
    Insira a descrição da imagem aqui
  2. el-form-item deve ter um atributo prop e o nome do parâmetro vinculado ao v-model deve ser consistente.
    Insira a descrição da imagem aqui

Código chave

  1. A caixa de marcadores visível é verdadeira primeiro

    	const visible = ref(false)
    	
    	const addOrUpdate = (row?: any)=>{
          
          
    		visible.value = true
    	}
    
  2. Apresente o próximoTick

    	// 在nextTick里面赋值
    	const addOrUpdate = (row?: any)=>{
          
          
    		visible.value = true
    		 nextTick(() => {
          
          
                dataForm.visitorUserId = row.visitorUserId
                dataForm.mobile = row.mobile
                dataForm.certNo = row.certNo
                dataForm.validNum = row.validNum
                dataForm.validTime = row.validTime
            })
    	}
    
  3. fechar pop-up

    const closeDialog = () => {
          
          
        dataFormRef.value?.resetFields()
        dataForm.visitorUserId = ''
        // console.log("dataFormRef.value", dataFormRef.value);
        
        visible.value = false
    }
    

Acho que você gosta

Origin blog.csdn.net/qq_42071369/article/details/127297117
Recomendado
Clasificación