列表排序按钮常用方法,实现“向前移动到第一个↑”、“向前移动∧”、“向后移动∨”、“向后移动到最后一个↓”

简介: 列表排序按钮常用方法,实现“向前移动到第一个↑”、“向前移动∧”、“向后移动∨”、“向后移动到最后一个↓”


<el-button
title="向前移动到第一个"
size="mini"
type="primary"
icon="el-icon-top"
:disabled="tableData.length scope.row.value === tableData[0].value :true"
@click.stop="moveToFirst(scope.row)"
circle
plain/>
<el-button
title="向前移动"
size="mini"
type="primary"
icon="el-icon-arrow-up"
:disabled="tableData.length scope.row.value === tableData[0].value :true"
@click.stop="moveToPrev(scope.row)"
circle
plain/>
<el-button
title="向后移动"
size="mini"
type="primary"
icon="el-icon-arrow-down"
:disabled="tableData.length scope.row.value === tableData.slice(-1)[0].value :true"
@click.stop="moveToNext(scope.row)"
circle
plain/>
<el-button
title="向后移动到最后一个"
size="mini"
type="primary"
icon="el-icon-bottom"
:disabled="tableData.length scope.row.value === tableData.slice(-1)[0].value :true"
@click.stop="moveToLast(scope.row)"
circle
plain/>

方法

getIndex(d) {
    return this.tableData.findIndex(v => v.value == d.value);
},
moveToFirst(d) {
    let idx = this.getIndex(d);
    this.tableData.splice(0, 0, this.tableData.splice(idx, 1)[0]);
},
moveToPrev(d) {
    let idx = this.getIndex(d);
    this.tableData.splice(idx - 1, 0, this.tableData.splice(idx, 1)[0]);
},
moveToNext(d) {
    let idx = this.getIndex(d);
    this.tableData.splice(idx + 1 > this.tableData.length - 1 ? 0 : idx + 1, 0, this.tableData.splice(idx, 1)[0]);
},
moveToLast(d) {
    let idx = this.getIndex(d);
    this.tableData.splice(this.tableData.length - 1, 0, this.tableData.splice(idx, 1)[0]);
},

扩展阅读类比置顶排序

image.png

相关文章
|
4月前
|
算法 索引
LeetCode第34题在排序数组中查找元素的第一个和最后一个位置
这篇文章介绍了LeetCode第34题"在排序数组中查找元素的第一个和最后一个位置"的解题方法,通过使用双指针法从数组两端向中间同时查找目标值,有效地找到了目标值的首次和最后一次出现的索引位置。
LeetCode第34题在排序数组中查找元素的第一个和最后一个位置
|
索引
【Leetcode-27.移除元素 -35.搜索插入位置】
【Leetcode-27.移除元素 -35.搜索插入位置】
34 0
|
7月前
|
索引
将数组指定索引位置的元素 移动到 目标索引位置,且不改变其他元素原本的顺序,注意这个不是对调元素位置,是移动某一个元素位置不影响其他元素顺(使用场景:拖拽改变数据的顺序,点击上下左右箭头移动元素顺序)
将数组指定索引位置的元素 移动到 目标索引位置,且不改变其他元素原本的顺序,注意这个不是对调元素位置,是移动某一个元素位置不影响其他元素顺(使用场景:拖拽改变数据的顺序,点击上下左右箭头移动元素顺序)
|
7月前
在排序数组中查找元素的第一个和最后一个位置
在排序数组中查找元素的第一个和最后一个位置
|
Go 索引 Cloud Native
【刷题日记】34. 在排序数组中查找元素的第一个和最后一个位置
本次刷题日记的第 72 篇,力扣题为:34. 在排序数组中查找元素的第一个和最后一个位置 ,中等
|
7月前
|
算法
leetcode-34:在排序数组中查找元素的第一个和最后一个位置
leetcode-34:在排序数组中查找元素的第一个和最后一个位置
35 0
LeetCode-34 在排序数组中查找元素的第一个和最后一个位置
LeetCode-34 在排序数组中查找元素的第一个和最后一个位置
|
算法
每日一题—— 在排序数组中查找元素的第一个和最后一个位置
每日一题—— 在排序数组中查找元素的第一个和最后一个位置
|
算法
力扣34题. 在排序数组中查找元素的第一个和最后一个位置
力扣34题. 在排序数组中查找元素的第一个和最后一个位置
86 0
|
算法
LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置
LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置
113 0
LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置