[JavaScript知识库]vue表格内部上下切换

今天来了个需求，要去表格内部可以行级切换

直接上代码

<el-table :data="addTableData" style="width: 100%" border>
	<el-table-column width="50">
         <template slot-scope="scope">
             <span @click="goUp(scope.$index)"><i class="el-icon-arrow-up"></i></span>
             <span @click="goDown(scope.$index)" style="margin-left:1px;"><i class="el-icon-arrow-down"></i></span>
         </template>
     </el-table-column>
     <el-table-column prop="columnSerialNo" label="ID" width="50"></el-table-column>
     ...
</el-table>

方法：

goUp(index){
   if(index>0){
        let updata = this.addTableData[index-1]
        this.addTableData.splice(index - 1,1)
        this.addTableData.splice(index,0,updata)
    }else{
        this.$message.error('已经是第一条，不可上移！')
    }
    
},
goDown(index){
    if(index+1==this.addTableData.length){
        this.$message.error('已经是最后一条，不可上移！')
       
    }else{
        let downdata = this.addTableData[index+1]
        this.addTableData.splice(index + 1,1)
        this.addTableData.splice(index,0,downdata)
    }
},

哦了