vue 表格嵌套表格 实现上移下移置顶置底_嵌套表怎么挪位置

vue 表格嵌套表格 实现上移下移置顶置底

1.使用数组splice方法交换位置实现上移、下移功能
2.使用数组splice、unshift、push方法实现置顶、置底功能

主要就是以下代码：

// 置顶
    handleTop(index, row, type) {
       // 将要置顶的元素存储后删除
       const temp = this.tableData.splice(index, 1)[0];
       // 将元素unshift到数组第一位
       this.tableData.unshift(temp);
     
    },
    // 置底
    handleBottom(index, row, type) {
      // 将要置底的元素存储后删除
      const temp = this.tableData.splice(index, 1)[0];
      // 将元素push到数组最后一位
      this.tableData.push(temp);
    },
    // 调整顺序，arr 数组，indexAdd 添加元素的位置，indexDel 删除元素的位置（indexAdd与indexDel交换位置）
    handleChangeOrder(arr, indexAdd, indexDel) {
      arr[indexAdd] = arr.splice(indexDel, 1, arr[indexAdd])[0];
      return arr;
    },
    // 上移，与前一个元素交换顺序
    handleUp(index, row, type) {
      this.handleChangeOrder(this.tableData, index, index - 1);
    },
    // 下移，与后一个元素交换顺序
    handleDown(index, row, type) {
      this.handleChangeOrder(this.tableData, index, index + 1);
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

让我们来看一看效果 ❥(ゝω・✿ฺ)

当然 也可以放在子表格里面，像这样 (๑＞ڡ＜)✿