Edit and preview in the back pipe to get the value writing method of the form

Vue Lieutenant general data The value or attribute of an object in is set to null

 In the project, we will encounter the problem of initializing data , Sure  this.xxx = ‘’, This method is commonly used , But if it is data The data in it , In this way, the code will look redundant .
 that , We can use this.assign() Method or Json

// This stupid method   But if you need to clear multiple buttons at the same time, you need to write them one by one  
data(){
    
return{
    
ismenu: {
    
        name: "",
        sex: '',
        age: '',
        birth: "",
        address: "",
      },
}
}

// Empty ismenu Data value 
 PS Preview and edit share the same pop-up layer when adding back pipe   After the preview is added 
  Adding and editing data will also be automatically added , At this time, we need to add the situation data when the Edit button is clicked 
  The general stupid way is this   But it's too redundant   Don't have to 
this.ismenu.name = "";
this.ismenu.sex = "";
this.ismen.age= "";
this.ismenu. birth= "";
this.ismenu.address = "";

this.assign() Method

 //  Initialize all data data 
Object.assign(this.$data, this.$options.data()) 

 //  initialization data One of the data 
 Object.assign(this.$data.xxx, this.$options.data().xxx)

PS  You have to empty it alone ismen The value of the object needs 
 Object.assign(this.$data.ismen, this.$options.data().ismen)

Json

Json  First in data In the definition of  xxx:[{
    a:1}], stay methods Method in   Empty data （ initialization ）
this.xxx = JSON.parse(JSON.stringify(this.xxx))

See code cloud code for details Quite understand

Get the value of the form

 Generally speaking, you will get the value during editing and assign the value  
//slot-scope="scope"  This is elem The method given by the framework 
// scope.$index Get index value  , scope.row Get the corresponding value 
 <template slot-scope="scope">
            <el-button
              size="mini"
              style="margin: 0"
              @click.stop="btnedit(scope.$index, scope.row)"> edit </el-button>
          </template>
         
//  This is to get the corresponding value 

// Then click Print to see the method inside 
btnedit(index,scope){
    
console.log(index,scope)// Print the obtained value 
}

 And while you are editing , You need to get the corresponding value in the form, such as this 
<el-form :model="ismenu" ref="ismenu" :rules="editFormRules">
        <!--  full name   Gender   Age   Birthday   Address   -->
        <el-form-item label=" full name " prop="name">
          <el-input
            style="width: 60%"
            v-model="ismenu.name"
            autocomplete="off"
            :disabled="titleResult[dialogStatus] == ' preview '"
          ></el-input>
        </el-form-item>
        <el-form-item label=" Gender " prop="sex">
          <el-radio-group
            v-model="ismenu.sex"
            :disabled="titleResult[dialogStatus] == ' preview '"
          >
            <el-radio :label="1"> male </el-radio>
            <el-radio :label="0"> Woman </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label=" Age " prop="age">
          <el-input-number
            v-model="ismenu.age"
            :min="0"
            :max="200"
            :disabled="titleResult[dialogStatus] == ' preview '"
          ></el-input-number>
        </el-form-item>
        <el-form-item label=" Birthday " prop="birth"> 
          <el-date-picker
            v-model="ismenu.birth"
            type="date"
            :disabled="titleResult[dialogStatus] == ' preview '"
            placeholder=" Select date "
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label=" Address " prop="addr">
          <el-input
            type="textarea"
            style="width: 60%"
            v-model="ismenu.addr"
            show-word-limit
            placeholder=" Please enter the address "
            :disabled="titleResult[dialogStatus] == ' preview '"
            :maxlength="1024"
          ></el-input>
        </el-form-item>
      </el-form>

// so what   You have to data It defines your value 
 ismenu: {
    // The form should be consistent with the input parameters required by the back end 
        name: "",
        sex: -1,
        age: 0,
        birth: "",
        addr: "",
      },

The most important thing is to come

 When you change or add data here  
 You must get model It's worth it 

// Take editors for example 
btnedit(index,scope){
    
this.$nextTick(() => {
    
//  The general assignment is written like this   But this is a stupid way  
// (this.ismenu.name = scope.name),
// (this.ismenu.sex = scope.sex),
// (this.ismenu.age = scope.age),
// (this.ismenu.birth = scope.birth),
// (this.ismenu.addr = scope.addr);
//  You can assign values in this way. You can get them all directly by enumerating 
this.ismenu=Object.assign({
    }, scope)
}));
}
// Then you add   Adding will automatically assign values. At this time, you need 
 Restore is initialization  ismenu Value of form 
 We usually write like this 
// (this.ismenu.name = ''),
// (this.ismenu.sex =''),
// (this.ismenu.age =''),
// (this.ismenu.birth = ''),
// (this.ismenu.addr = '');

 Directly 
Object.assign(this.$data.ismenu, this.$options.data().ismenu);


 This method 
 //  Initialize all data data 
Object.assign(this.$data, this.$options.data()) 

 //  initialization data One of the data 
 Object.assign(this.$data.xxx, this.$options.data().xxx)

 This is added successfully when adding   Prevent the next click to add   The last addition is still 
this.$refs["ismenu"].resetFields();//  Empty the contents of the form   In case of the next click, the original data is still 

See code cloud code for details Quite understand