elementui + vue2实现表格行的上下移动

暴富暴富暴富啦啦啦

已于 2024-01-25 10:47:13 修改

阅读量750

点赞数 11

文章标签： elementui 前端 javascript

于 2024-01-18 15:56:17 首次发布

本文链接：https://blog.csdn.net/szzlh123456789/article/details/135676744

版权

文章讲述了如何在Vue应用中利用ElementUI组件构建一个具有自增序号且支持行上下移动功能的表格，包括`scope.$index`在事件处理中的应用以及如何处理分页不影响序号的情况。

摘要由CSDN通过智能技术生成

scope.$index 获取当前点击的序号

<el-dialog
    append-to-body
    title="条件编辑"
    :visible.sync="dialogVisible"
    width="60%"
>
    <el-table :data="data1" border style="width: 100%">
        <el-table-column type="index" label="序" width="100" align="center">
        </el-table-column>
        <el-table-column prop="edit" label="" align="center">
            <template slot-scope="scope">
               <el-button
                  :disabled="scope.$index === 0"
                  plain
                  type="primary"
                  icon="el-icon-top"
                  @click="moveUp(scope.$index, scope.row)"
                  >上移</el-button>
                <el-button
                :disabled="scope.$index === data1.length - 1"
                  plain
                  type="primary"
                  icon="el-icon-bottom"
                  @click="moveDown(scope.$index, scope.row)"
                  >下移</el-button>
             </template>
        </el-table-column>
     </el-table>
</el-dialog>

 this.data1 是列表的总数据

// 上移
moveUp(index, row) {
    if(index !== 0){
      const currentRow = row;
      this.data1.splice(index, 1);
      this.data1.splice(index - 1, 0, currentRow);
     }
},
// 下移
moveDown(index, row) {
    if(index !== this.data1.length-1){
      const currentRow = row;
      this.data1.splice(index, 1);
      this.data1.splice(index + 1, 0, currentRow);
     }
},

如果不想受分页影响

表格第一列为自增序号（不受分页影响）

<el-table-column label="序号" width="70" align="left">
    <template slot-scope="scope">
       {{ (scope.$index+1)+(currentPage-1)*pageSize }}
    </template>
</el-table-column>

--------->