El table implements adding / deleting rows, and a parameter changes accordingly

Effect display ：

When deleting or adding rows in the middle , The content of the leftmost step will also change .

Code display ：

First ,html Medium el-table Code ：

<el-table-self :data="setList"  style="width: 100%" max-height="250">
      <el-table-column align="center" prop="orderNum" label=" step " width="80">
          <template slot-scope="scope">
              <span> The first {
    {
    scope.row.orderNum}} Step </span>
          </template>
      </el-table-column>
      <el-table-column align="center" prop="type" label=" type ">
          <template slot-scope="scope">
               <el-select 
                  size="small"
                  v-model="scope.row.type" placeholder=" Please select ">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          </template>
      </el-table-column>
      <el-table-column align="center" prop="realname" label=" Approve users ">
          <template slot-scope="scope">
               <el-select 
                   size="small"
                    :disabled="scope.row.type!=='1'" 
                    v-model="scope.row.userId" 
                    placeholder=" Please select ">
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.realname"
                    :value="item.id">
                  </el-option>
                </el-select>
          </template>
      </el-table-column>
      <el-table-column align="center" prop="roleName" label=" Approval role ">
          <template slot-scope="scope">
                 <el-select 
                    size="small"
                    :disabled="scope.row.type!=='2'" 
                    v-model="scope.row.roleId" 
                    placeholder=" Please select ">
                  <el-option
                    v-for="item in roleList"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id">
                  </el-option>
                </el-select>
          </template>
      </el-table-column>
      <el-table-column prop="flowCode" label=" Process code " ></el-table-column>
      <el-table-column fixed="right" align="center" label=" operation " width="180">
        <template slot-scope="scope">
           <el-button size="mini" type="primary" icon="el-icon-plus"
                  @click.native.prevent="addRow(scope.$index, setList)"></el-button>
           
           <el-button size="mini" type="primary" icon="el-icon-minus" 
                  @click.native.prevent="deleteRow(scope.$index, setList)"></el-button>
        </template>
      </el-table-column>
    </el-table-self>

then ,methods There need to be three methods ：（ as follows ）

// First of all ： obtain el-table Data in   setList
      getcheckedId() {
    
       	this.$axios({
     
		//url And parameters 
		}).then((res) => {
    
			// Assign the obtained return value to setList
            this.setList=res.data
            // If setList No data in , Then manually push A piece of data , Can show  + ,—  Number 
          if(this.setList.length<1){
    
              this.setList.push({
    
                flowCode:'',
                orderNum: res.data.length+1,
                realname: '',
                userId: '',
                remark: "",
                roleId: "",
                roleName: "",
                scope: 0,
                updateTime: null,
              })
          }
        }).catch(() => {
    
          // return
        })
      },

// second ： Click on  +  Execute the method of adding a row of data 
addRow(index, rows) {
    
		// Using array splice Methods from index+1 Location delete 0 Elements , And insert an empty piece of data 
        rows.splice(index+1,0,{
    
            flowCode:'',
            orderNum: index+2,
            realname: '',
            userId: '',
            remark: "",
            roleId: "",
            roleName: "",
            scope: 0,
            updateTime: null,
        });
      },

// Third ： Click on  —  No. execute the method of deleting a row 
deleteRow(index, rows) {
    
		// Using arrays splice Method , Will be index Data deletion 
        rows.splice(index, 1);
      },

The final point , Yes orderNum（ Step number ） To deal with —— Yes setList Listen to your data

 setList:{
    
          handler: function (newVal,oldVal) {
    
            // console.log(" monitor setList length ",newVal.length,oldVal.length)
                  if(newVal.length){
    
                    for(let i in newVal){
    
                    	// Get... In real time orderNum Value 
                        newVal[i].orderNum=Number(i)+1
                    }
                  } 
				// It's here to judge , If it is user approval , Just make the character empty ; If it is role approval , Just empty the user 
                  for(let i in newVal){
    
                    if(newVal[i].type==='1'){
    
                      newVal[i].roleId=''
                      newVal[i].roleName=''
                    }else if(newVal[i].type==='2'){
    
                      newVal[i].userId=''
                      newVal[i].realname=''
                    }
                  }
              },      
          deep: true    // Deep monitoring 
      } 

Conclusion ：

above , We can achieve the results we want ！（ps: Blogging is for taking notes ！）