Ant-Design-vue表单的编辑功能数据的回显

注意点:
        1. 需要将传入过来的数据进行深拷贝,否则在编辑弹框中修改数据会导致页面数据一起变化
        2. 在给a-form赋值时,需要调用this.$nextTick方法,否则会报错提示dom没有渲染,且赋值时需要按需赋值,这里调用lodash中的_.pick方法
        3. Ant-Design-vue中的组件他的值为一个Monent对象,在使用时或传入时都需要进行转换否则会报错。
      
        
          
        
        
          
        
        
          
        
        
          
        
        
          
            
            
          
        
      


    
      
      
      
      
      
      
        
      
    


    // 编辑按钮
    editUser(val) {
      this.modalType = 1
      this.visible = true
      const newForm = JSON.parse(JSON.stringify(val))
      this.$nextTick(() => {
          const pickedValues = _.pick(newForm, ['name', 'age', 'address', 'gender']);
          pickedValues.date = this.$moment(newForm.date, 'YYYY-MM-DD');
          this.addForm.setFieldsValue(pickedValues)
      })
    }
 
  
 
  
 
 

你可能感兴趣的:(前端,vue.js,前端,javascript)