ElementUI实现表格(table) 行上下移动的效果
参考地址
https://blog.csdn.net/sunshine0508/article/details/88390155
看大佬的地址
<div id="app">
<el-table :data="URLModles" :show-header="false" highlight-current-row style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55px">
</el-table-column>
<el-table-column type="index" width="55px">
</el-table-column>
<el-table-column prop="expressCode" label="快递代码" width="100px">
</el-table-column>
<el-table-column prop="expressName" label="快递名称" width="100px">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" :disabled="scope.$index===0" @click="moveUp(scope.$index,scope.row)"><i
class="el-icon-arrow-up"></i></el-button>
<el-button size="mini" :disabled="scope.$index===(URLModles.length-1)"
@click="moveDown(scope.$index,scope.row)"><i class="el-icon-arrow-down"></i></el-button>
<el-button type="info" size="mini" round v-if="scope.$index===0">默认</el-button>
</template>
</el-table-column>
</el-table>
</div>
var vm = new Vue({
el: "#app",
data() {
return {
URLModles: [{
index: '1',
expressCode: 'SF',
expressName: '顺丰快递',
status: true,
}, {
index: '2',
expressCode: 'YTO',
expressName: '圆通快递',
status: true,
}, {
index: '3',
expressCode: 'UC',
expressName: '优速快递',
status: true,
}],
multipleSelection: []
}
},
methods: {
//选择复选框数据
handleSelectionChange(val) {
this.multipleSelection = val;
},
//上移
moveUp(index, row) {
var that = this;
console.log('上移', index, row);
console.log(that.URLModles[index]);
if (index > 0) {
let upDate = that.URLModles[index - 1];
that.URLModles.splice(index - 1, 1);
that.URLModles.splice(index, 0, upDate);
} else {
alert('已经是第一条,不可上移');
}
},
//下移
moveDown(index, row) {
var that = this;
console.log('下移', index, row);
if ((index + 1) === that.URLModles.length) {
alert('已经是最后一条,不可下移');
} else {
console.log(index);
// 保存下一条数据
let downDate = that.URLModles[index + 1];
// 删除下一条数据
that.URLModles.splice(index + 1, 1);
// 增添被删除的那一条数据
that.URLModles.splice(index, 0, downDate);
}
}
}
})
</script>
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

支付宝

微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快?
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码