element ui 表格前端上下行互换位置

最新推荐文章于 2024-05-14 13:47:57 发布

whn1231

最新推荐文章于 2024-05-14 13:47:57 发布

阅读量519

点赞数 1

本文链接：https://blog.csdn.net/whn1231/article/details/125765286

版权

效果示例

代码实现

 <el-button 
   size="small" 
   type="danger" 
   icon="el-icon-delete" 
   circle 
   @click="handleDelete(scope.row)" 
 /> 
 <el-button
    v-if="scope.$index !== 0"
    size="small"
    icon="el-icon-top"
    circle
    @click="handleUp(scope.$index)"
  />
  <el-button
     v-if="scope.$index !== dataList.length-1"
     size="small"
     icon="el-icon-bottom"
     circle
     @click="handleDown(scope.$index)"
   />

js代码

// 数组项 互换位置
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    // 上移
    handleUp(i) {
      this.swapArray(this.dataList, i, i - 1);
    },
    // 下移
    handleDown(i) {
      this.swapArray(this.dataList, i, i + 1);
    },
    // 删除
    handleDelete(data) { // 删除按钮  点击函数
      this.dataList.splice(this.dataList.indexOf(data), 1);
    },