vue中表格新增，修改，保存，删除，上移，下移功能实现

代码如下：

<div class="fragment">
      <div class="titleInfo">
        <span>角色关联</span>
        <el-button type="primary" @click="add"  v-if="!isLook">新增节点</el-button>
      </div>
      <el-table
        :data="relNodeList"
        stripe
        border
        highlight-current-row>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column prop="nodeName" label="节点名称" min-width="80">
           <template slot-scope="scope">
            <span v-if="scope.row.edit"><el-input v-model="scope.row.nodeName" placeholder="请输入节点名称"></el-input></span>
            <span v-else>{{scope.row.nodeName}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="userId" label="关联账号" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.edit"><el-input v-model="scope.row.userId" placeholder="请输入账号信息"></el-input></span>
            <span v-else>{{scope.row.userId}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="userName" label="账号姓名" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.edit"><el-input v-model="scope.row.userName" placeholder="请输入账号姓名"></el-input></span>
            <span v-else>{{scope.row.userName}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.edit"><el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input></span>
            <span v-else>{{scope.row.remark}}</span>
           </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100px" fixed="right" v-if="!isLook">
          <template slot-scope="scope">
            <el-button type="text" class="tb-btn" size="small" @click="handleEdit(scope)" v-show="!scope.row.edit">修改</el-button>
            <el-button type="text" class="tb-btn" size="small" @click="handleSaveRow(scope)" v-show="scope.row.edit">保存</el-button>
            <el-button type="text" size="small" class="tb-btn" @click="handleDelRow(scope)"><span class="danger-txt">删除</span></el-button>
            <el-button type="text" class="tb-btn" size="small" @click="moveUp(scope.$index)" :disabled="scope.$index === 0">上移</el-button>
            <el-button type="text" class="tb-btn" size="small" @click="moveDown(scope.$index)" :disabled="scope.$index === relNodeList.length - 1">下移</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

add(){
     let length=this.relNodeList.length
     if(length>0&&this.relNodeList[length-1].edit){
       this.$message.info('请先保存上一条')
       return false
     }
      var list = {
                nodeId:'',
                nodeName:'',
                userId: '',
                userName:'',
                remark:'',
                edit:true
         		 };
      this.relNodeList.push(list)
    },
    //修改
    handleEdit(scope){
      scope.row.edit=true;
    },
    //保存
    handleSaveRow(scope){
      if(scope.row.nodeName==''){
        this.$message.error('请输入结点名称')
        return false
      }
      if(scope.row.userId==''){
        this.$message.error('请输入关联账号')
        return false
      }
      if(scope.row.userName==''){
        this.$message.error('请输入关联账号姓名')
        return false
      }
      scope.row.edit=false;
    },
    ///删除
    handleDelRow(scope){
      this.$confirm('确定删除吗', '提示').then(() => {
        this.relNodeList.splice(scope.$index,1);
      })
    },
     moveUp(index){
      if (index > 0) {
        let upDate = this.relNodeList[index - 1];
        this.relNodeList.splice(index - 1, 1);
        this.relNodeList.splice(index, 0, upDate);
      } else {
        this.$message.error('已经是第一条，不可上移');
      }
    },
    moveDown(index){
      if (index + 1 === this.relNodeList.length) {
        this.$message.error('已经是最后一条，不可下移');
      } else {
        let downDate = this.relNodeList[index + 1];
        this.relNodeList.splice(index + 1, 1);
        this.relNodeList.splice(index, 0, downDate);
      }
    },