微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐