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

最新推荐文章于 2024-05-07 10:58:08 发布

陈怂怂

最新推荐文章于 2024-05-07 10:58:08 发布

阅读量2k

点赞数 4

分类专栏：其他不想分类文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_42581563/article/details/115484547

版权

其他不想分类专栏收录该内容

15 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vue中实现表格数据的上移、下移、置顶和置底功能。通过数组的splice、unshift和push方法，可以轻松地调整表格行的顺序，实现动态表格布局。示例代码详细展示了这些操作的实现过程，适用于前端开发中的数据展示和交互需求。

摘要由CSDN通过智能技术生成

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);
    },