需求:增加表格行对选,然后点击 上、下移动按钮可实现整体上下移动,并且保持行选中样式。
//上移
upMoveHandler(tTable){
let arrs_sel = this.seqSelectTr(this.selAddTrArrs, 'seq');
const arrs_ = JSON.parse(JSON.stringify(arrs_sel));
for(let elem of arrs_){
const _index = this.newAddTableArrs.findIndex((nelem) => {
return nelem.id == elem.id
});
_index > 0 && this.goingUp(this.newAddTableArrs[_index], _index);
}
setTimeout(() => {
for(let _elem of arrs_){
const _index_ = this.newAddTableArrs.findIndex((nelem) => {
return nelem.id == _elem.id
});
_index_ !== -1 && this.$refs[tTable].toggleRowSelection(this.newAddTableArrs[_index_], true);
}
});
},
//下移
downMoveHandler(tTable){
let arrs_sel = this.seqSelectTr(this.selAddTrArrs, 'reseq');
const arrs_ = JSON.parse(JSON.stringify(arrs_sel));
for(let elem of arrs_){
const _index = this.newAddTableArrs.findIndex((nelem) => {
return nelem.id == elem.id
});
if(_index !== -1){
_index < (this.newAddTableArrs.length - 1) && this.goingDown(this.newAddTableArrs[_index], _index);
}
}
setTimeout(() => {
for(let _elem of arrs_){
const _index_ = this.newAddTableArrs.findIndex((nelem) => {
return nelem.id == _elem.id
});
_index_ !== -1 && this.$refs[tTable].toggleRowSelection(this.newAddTableArrs[_index_], true);
}
});
},
/*给当前选中的所有行,按照表格数据排序
arrsdata: 当前需要处理的数组
flag: 是顺序还是倒序
*/
seqSelectTr(arrsdata, flag){
let arrs = JSON.parse(JSON.stringify(arrsdata));
for(let elem of arrs){
const _index = this.newAddTableArrs.findIndex((nelem) => {
return nelem.id == elem.id
});
_index !== -1 && (elem['_index'] = _index);
}
arrs.sort(function (a, b) {
a = a['_index'];
b = b['_index'];
return flag == 'seq' ? a - b : b - a;
});
return arrs;
},
比较简单,但是需要注意的是,上下移动的排序方式是不一样的。以及el-table组件,使用 toggleRowSelection 进行选中时,必须操作当前渲染表格的数组,才会生效。否则不生效