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("最底了")
        }
     }
  }