el-table实现增加/删除行，某参数跟着变

效果展示：

当在中间删除或添加行时，最左侧步骤的内容也会跟着变。

代码展示：

首先，html中的el-table代码：

<el-table-self :data="setList"  style="width: 100%" max-height="250">
      <el-table-column align="center" prop="orderNum" label="步骤" width="80">
          <template slot-scope="scope">
              <span>第{{scope.row.orderNum}}步</span>
          </template>
      </el-table-column>
      <el-table-column align="center" prop="type" label="类型">
          <template slot-scope="scope">
               <el-select 
                  size="small"
                  v-model="scope.row.type" placeholder="请选择">
                  <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="审批用户">
          <template slot-scope="scope">
               <el-select 
                   size="small"
                    :disabled="scope.row.type!=='1'" 
                    v-model="scope.row.userId" 
                    placeholder="请选择">
                  <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="审批角色">
          <template slot-scope="scope">
                 <el-select 
                    size="small"
                    :disabled="scope.row.type!=='2'" 
                    v-model="scope.row.roleId" 
                    placeholder="请选择">
                  <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="流程编码" ></el-table-column>
      <el-table-column fixed="right" align="center" label="操作" 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>

然后，methods中需要有三个方法：（如下）

//第一：获取el-table中的数据  setList
      getcheckedId() {
       	this.$axios({ 
		//url和各个参数
		}).then((res) => {
			//将获取到的返回值赋值给setList
            this.setList=res.data
            //如果setList中没有数据，则手动push一条数据，可以展示 + ，— 号
          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
        })
      },

//第二：点击 + 号执行添加一行数据的方法
addRow(index, rows) {
		//用数组的splice方法从index+1位置删除0个元素，并插入一条空数据
        rows.splice(index+1,0,{
            flowCode:'',
            orderNum: index+2,
            realname: '',
            userId: '',
            remark: "",
            roleId: "",
            roleName: "",
            scope: 0,
            updateTime: null,
        });
      },

//第三：点击 — 号执行删除一行的方法
deleteRow(index, rows) {
		//利用数组的splice方法，将该index数据删除
        rows.splice(index, 1);
      },

最终要的一点，对orderNum（步骤编号）的处理——对setList的数据进行监听

 setList:{
          handler: function (newVal,oldVal) {
            // console.log("监听setList长度",newVal.length,oldVal.length)
                  if(newVal.length){
                    for(let i in newVal){
                    	//实时获取orderNum的值
                        newVal[i].orderNum=Number(i)+1
                    }
                  } 
				//这里用来判断，如果是用户审批，就把角色制空；如果是角色审批，就把用户制空
                  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    //深度监听
      } 

结束语：

以上，就可以实现我们想要的结果了！（ps:写博客是为了记笔记！）