elementUI+VUE 表格数据单行移动

需求说明

选中表格单行数据，点击上移或下移实现数据移动。操作按钮单独在表格上。

代码步骤

一、索引获取
原有的从后台获取的数据中并没有存放索引，且表格中数据是根据前端的索引编写的序号。

添加** :row-class-name=“tableRowClassName” **属性方法

<el-table ref="multipleTable" :data="tableData" height="calc(100% - 38px)" tooltip-effect="dark" style="width: 100%"
	stripe @row-click="rowClick" :row-class-name="tableRowClassName" border highlight-current-row>

methods中, 把索引rowIndex插入行数据中

tableRowClassName({row, rowIndex}){
	row.index = rowIndex;
},

二、移动逻辑

moveUp(){//上移事件
	//tableData存储表格数据，rowData存储选中行数据，selectedRadio存储选中行数据id，下移同理
	if(!this.selectedRadio){
		this.$message.warning('请先选中一条数据进行移动！');
		return;
	}
	if(this.rowData.index == 0){
		this.$message.warning('该条数据已是第一条！');
		return;
	}
	var _this = this;
	let upDate = _this.tableData[this.rowData.index - 1];
	_this.tableData.splice(this.rowData.index - 1, 1);
	_this.tableData.splice(this.rowData.index, 0, upDate);
},
moveDown(){//下移
	if(!this.selectedRadio){
		this.$message.warning('请先选中一条数据进行移动！');
		return;
	}
	if(this.rowData.index == this.tableData.length-1){
		this.$message.warning('该条数据已是最后一条！');
		return;
	}
	var _this = this;
	let upDate = _this.tableData[this.rowData.index + 1];
	_this.tableData.splice(this.rowData.index + 1, 1);
	_this.tableData.splice(this.rowData.index, 0, upDate);
},