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>