vue 页面使用两套el-form表单并且嵌套使用el-checkbox

由于项目中需要在页面内使用两套form表单,并且在表单前面加上复选框checkbox,用来替换另一个表单中的数据。

此时使用el-checkbox的change方法进行动态显示替换另一套form中的数据

新数据如下:


        
          
            
          
        
        
          
            
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
      

 旧数据:


        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
      
export default {
  name: 'Popup',
  data() {
    return {
      centerDialogVisible: false,
      formLabelWidth: '180px',
      checked: {
        // checkox选中的属性
        checke1: '',
        checke2: '',
        checke3: '',
        checke4: '',
        checke5: '',
        checke6: '',
        checke7: '',
        checke8: '',
        checke9: '',
        checke10: '',
        checke11: '',
        checke12: '',
        checke13: ''
      },
      formTmp: {
        contractCode: '666',
        projectCode: '',
        accountName: '',
        opportunityName: '',
        lastUser: '',
        signDate: '',
        poStatus: '',
        contractType: '',
        entityType: '',
        signStatus: '',
        signType: '',
        fscProductType: '',
        adjustProduct: '',
        adjustProductCount: ''
      },
      formOld: {
        contractCode: '666',
        projectCode: '',
        accountName: '',
        opportunityName: '',
        lastUser: '',
        signDate: '',
        poStatus: '',
        contractType: '',
        entityType: '',
        signStatus: '',
        signType: '',
        fscProductType: '',
        adjustProduct: '',
        adjustProductCount: ''
      },
      formNew: {
        contractCode: '55',
        projectCode: '888',
        accountName: '',
        opportunityName: '',
        lastUser: '',
        signDate: '',
        poStatus: '',
        contractType: '',
        entityType: '',
        signStatus: '',
        signType: '',
        fscProductType: '',
        adjustProduct: '',
        adjustProductCount: ''
      }
    }
  },

最最关键的是

methods: {
    handleChange(field, val) {
      if (val) {
        this.formOld[field] = this.formNew[field]
      } else {
        this.formOld[field] = this.formTmp[field]
      }
    }
  }

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