elementUI+VUE 表格数据单行移动

最新推荐文章于 2024-06-12 15:01:41 发布

原创最新推荐文章于 2024-06-12 15:01:41 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

JavaScript 同时被 3 个专栏收录

20 篇文章

订阅专栏

vue

15 篇文章

订阅专栏

ElementUI

10 篇文章

订阅专栏

本文介绍了一种在前端表格中实现数据上移和下移的方法，通过添加行索引并使用Vue.js的特性，实现了选中行数据的轻松移动。文章详细讲解了如何利用自定义行类名和splice方法来更新表格数据，确保数据移动的准确性和用户体验。

需求说明

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

代码步骤

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

添加** :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);
},