Vue Elementui Table更换行顺序

2022-01-25 11:05:50 阅读：305 来源： 互联网

标签：index www Vue 文件 Elementui splice Table change

放张图：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue Elementui Table更换行顺序