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判断里面，不然每次点击上移或下移数组会删除掉元素。

 

标签：index,www,Vue,文件,Elementui,splice,Table,change
来源： https://www.cnblogs.com/SZPLove/p/15842084.html