Vue Elementui Table更换行顺序

放张图:Vue Elementui Table更换行顺序

 

 

Vue文件:

<el-table-column property="address" label="顺序" width="120" align='center'>
          <template slot-scope="scope">
            <!-- <a class="dialogIcon4_5" @click="upMoveBtn(scope)"></a>
            <a class="dialogIcon4_2" @click="downMoveBtn(scope)"></a> -->
            <a class="dialogIcon4_5" @click="changeIndex(scope.row.index,-1)"></a>
            <a class="dialogIcon4_2" @click="changeIndex(scope.row.index,1)"></a>
          </template>
        </el-table-column>
  <el-table :row-class-name="tableRowClassName" stripe :data="gridData" max-height="400" :row-style="{height: '20px'}" :cell-style="{padding:'5px'}">

Js文件:

changeIndex(index,change){         if((index+change)>=0&&((index+change)<=this.gridData.length)){           let item=this.gridData.splice(index,1)[0];           this.gridData.splice(index+change,0,item);         }         console.log('this.gridData: ', this.gridData);         //[this.gridData[index],this.gridData[index-1]] = [this.gridData[index-1],this.gridData[index]];       },       tableRowClassName({row, rowIndex}){         row.index=rowIndex;       },

PS:参考自网上:https://www.jb51.net/article/181440.htm      但是原文那个let item=this.gridData.splice(index,1)[0];应该放在if判断里面,不然每次点击上移或下移数组会删除掉元素。

 

上一篇:2045. 到达目的地的第二短时间_2022_01_22


下一篇:java中的比较、调用对象---内容与地址,赋值操作