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>
--------->
elementui + vue2实现表格行的上下移动_<el-button @click="moveup(scope.$index)">up</el-bu-CSDN博客