Vue实现table上下移动排序

最新推荐文章于 2024-08-16 15:00:40 发布

唯曼影离殇

最新推荐文章于 2024-08-16 15:00:40 发布

阅读量1.3k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/wdj861911434/article/details/108382235

版权

基于element-ui框架：

================ data ===================
HotTableList:[]

================ html ===================
<template v-slot="scope">
    <el-button  @click="upindex(scope.$index,scope.row)">上移</el-button>
    <el-button  @click="downindex(scope.$index,scope.row)">下移</el-button>
</template>

================ 上移 ===================
upindex(index, row) {
if (index > 0) {
let upDate = this.HotTableList[index - 1];
this.HotTableList.splice(index - 1, 1);
this.HotTableList.splice(index, 0, upDate);
} else {
this.$message.warning(“已经是第一条了！”);
return false;
}
},

================ 下移 ===================
downindex(index, row) {
if (index + 1 === this.HotTableList.length) {
this.$message.warning(“已经是最后一条了！”);
return false;
} else {
let downDate = this.HotTableList[index + 1];
this.HotTableList.splice(index + 1, 1);
this.HotTableList.splice(index, 0, downDate);
}
},