Vue2+Element，element-table表格单元格合并后增加上下移动功能按钮

突然要做一个需求，需要在表格的每行第一列添加两个按钮，用于整行向上移动一行的位置，和向下移动一行位置，除了本行和上下行位置变化，其他行位置不变，整体功能不难，但是项目中表格做了单元格合并，一个完整的一行里面还有多个子行，上下移动过程需要把所有子行也一起移动和上面一行所有子行互换位置，这就比较麻烦了，从网上看了一圈没有很多的解决办法，结合网上的方法，这里我做了一套实现方案。

 表格这里就是简单展示，在前面插入两个小按钮，给按钮添加点击事件，这里我为了好处理事件，用了两个函数，其实可以合并成一个减少代码量，小伙伴可以按照自己风格去写

<el-table class="drop" ref="table" :data="list">
          <el-table-column label="操作" align="center" >
            <template slot-scope="scope">
              <div class="el-drop-list">
                <span class="el-drop-links" @click="moveUp(scope.$index,scope.row)">
                  <i class="el-icon-arrow-up"></i>
                </span>
                <span class="el-drop-links" @click="moveDown(scope.$index,scope.row)">
                  <i class="el-icon-arrow-down"></i>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>

主要是这里对表格数据处理，因为表格展示的单元格合并一般都是有相同的一个Id或者grounpId，根据表格数组里相同的一个属性进行单元格合并，所有我们在处理表格数据上下移动也根据这个去判断，这里我封装了一个修改数组的函数，传入要修改的数组，需要交换位置的两组的grounpId，如下：

// 修改数组，上下交换
  swapById(arr, id1, id2) {
  const newArr = [];
  let prevId = null;
  let currentArr = [];

  for (const obj of arr) {
    if (obj.id === id1 || obj.id === id2) {
      if (prevId !== obj.id) {
        // 当id变化时，将上一组添加到新数组，并开始收集新的id组
        if (currentArr.length > 0) {
          newArr.push(currentArr);
          currentArr = [obj];
        } else {
          currentArr.push(obj);
        }
        prevId = obj.id;
      } else {
        // 同一id组内，直接添加
        currentArr.push(obj);
      }
    } else {
      // 其他id的元素，直接添加到新数组
      if (currentArr.length > 0) {
        newArr.push(currentArr);
        currentArr = [obj];
      } else {
        currentArr.push(obj);
      }
      prevId = obj.id;
    }
  }

  // 添加最后一组
  if (currentArr.length > 0) {
    newArr.push(currentArr);
  }

  // 执行交换操作
  const id1Index = newArr.findIndex(group => group[0].id === id1);
  const id2Index = newArr.findIndex(group => group[0].id === id2);

  if (id1Index !== -1 && id2Index !== -1) {
    [newArr[id1Index], newArr[id2Index]] = [newArr[id2Index], newArr[id1Index]];
  }
  // 再次扁平化数组
  return newArr.flat();
},

封装完函数，我们接着编写上下移动的点击事件函数，这里我分开写主要是需要判断如果是第一条或者是最后一条数据需要做出提示不能位移，不进行如何操作

// 向上移动一格
moveUp(index,row){
  if(index > 0){
    let groupId = this.list[index - 1].id
    let result = this.swapById(this.list,row.id,groupId)
    this.list = [...result]
  }else{
    this.$message({message:'已经是第一条了，不可上移',type:'warning'})
  }
},
// 向下移动一格
moveDown(index,row){
  let newGroundId=this.list[this.list.length - 1].id
  if(this.list[index].id === newGroundId){
    this.$message({message:'已经是最后一条了，不可上移',type:'warning'})
  }else {
    let lastGrounpId= this.list.reduce((acc,object,index) =>{
      if(object.id === row.id){
        acc=index
      }
      return acc;
    },-1)
    let groupId2 = this.list[lastGrounpId + 1].id
    let result1 = this.swapById(this.list, row.id, groupId2)
    this.list = [...result1]
  }
}

修改完数组后进行重新赋值，这里我用了...展开运算符号赋值进行浅拷贝，以上就是复杂的表格数据移动，希望有帮助大家更好的开发