欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue使用elementui实现表格中上下移动功能

程序员文章站 2022-07-14 17:05:54
...

html代码

 <el-table  :data="prodata">
	<el-table-column align="center" label="操作">
	   <template slot-scope="scope">
	     <el-button  @click="upLayer(scope.$index,scope.row)">上移</el-button>
	     <el-button  @click="downLayer(scope.$index,scope.row)" >下移 </el-button>
	   </template>
	 </el-table-column>
 </el-table>

js代码

upLayer(index, row) {
     var that = this;
     if (index == 0) {
       that.$message({
         message: "处于顶端,不能继续上移",
         type: "warning"
       });
     } else {
       let upDate = that.prodata[index - 1];
       that.prodata.splice(index - 1, 1);
       that.prodata.splice(index, 0, upDate);
     }
   },
   downLayer(index, row) {
     var that = this;
     if (index + 1 === that.prodata.length) {
       that.$message({
         message: "处于末端端,不能继续下移",
         type: "warning"
       });
     } else {
       let downDate = that.prodata[index + 1];
       that.prodata.splice(index + 1, 1);
       that.prodata.splice(index, 0, downDate);
     }
   }