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>

posted @   南风晚来晚相识  阅读(3944)  评论(0编辑  收藏  举报
编辑推荐:
· 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,欢迎大家贡献代码
点击右上角即可分享
微信分享提示