需求说明
选中表格单行数据,点击上移或下移实现数据移动。操作按钮单独在表格上。
代码步骤
一、索引获取
原有的从后台获取的数据中并没有存放索引,且表格中数据是根据前端的索引编写的序号。
添加** :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);
},