实现上移下移置顶置底效果

最新推荐文章于 2024-06-28 11:18:26 发布

玉米_欣

最新推荐文章于 2024-06-28 11:18:26 发布

阅读量2.9k

点赞数

分类专栏：前端积累

本文链接：https://blog.csdn.net/u012967849/article/details/78767838

版权

前端同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

积累

7 篇文章 0 订阅

订阅专栏

html

<div>
    <span (click)="caretDirection(col,'up')"><i class="anticon anticon-caret-up"></i></span>
    <span (click)="caretDirection(col,'down')"><i class="anticon anticon-caret-down"></i></span>
    <span (click)="caretDirection(col,'top')"><i class="anticon anticon-step-backward"></i></span>
    <span (click)="caretDirection(col,'bottom')"><i class="anticon anticon-step-forward"></i></span>
</div>

函数

// up
   caretUp(array,index,value){
      array.splice(index, 1);
      array.splice(index-1,0,value);
   }
  // down
   caretDown(array,index,value){
      array.splice(index, 1);
      array.splice(index+1,0,value);
   }
  // top
    caretTop(array,index,value){
      array.splice(index, 1);
      array.unshift(value);
   }
  // bottom
   caretBottom(array,index,value){
      array.splice(index, 1);
      array.push(value);
   }
  // all
   caretDirection(value,direction){
     let arr = this.tableAllCols;
     let ind = arr.indexOf(value);
      if(direction =='up'){
        if(ind != 0){
            this.caretUp(arr,ind,value);
            this.tableResetCols();
        }else{
          alert("最顶了")
        }
         }else if(direction =='down'){
       if(ind != arr.length-1){
             this.caretDown(arr,ind,value);
             this.tableResetCols();
        }else{
          alert("最底了")
        }
     }else if(direction =='top'){
        if(ind != 0){
           this.caretTop(arr,ind,value);
           this.tableResetCols();
        }else{
          alert("最顶了")
        }
        }else if(direction =='bottom'){
       if(ind != arr.length-1){
           this.caretBottom(arr,ind,value);
           this.tableResetCols();
        }else{
          alert("最底了")
        }
     }
  }