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: '圆通快递',{
					index: '3',expressCode: 'UC',expressName: '优速快递',}],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,upDate);
				} else {
					alert('已经是第一条,不可上移');
				}
			},//下移
			moveDown(index,row) {
				var that = this;
				console.log('下移',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,downDate);
				}
			}
		}

	})
</script>

相关文章

这篇文章我们将通过debug源码的方式来带你搞清楚defineAsync...
欧阳老老实实的更新自己的高质量vue源码文章,还被某2.6k st...
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个...
组合式 (Composition) API 的一大特点是“非常灵活”,但也因...
相信你最近应该看到了不少介绍Vue Vine的文章,这篇文章我们...
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文...