上移:moveUp
下移:moveDown
<el-table ref="multipleTable" :height="operaHeight" :data="listTableData" style=" 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="操作名称" min-width="30%">
<template slot-scope="scope">
<span @click="btnActionDataClick(scope.row)">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="操作类型" min-width="30%"></el-table-column>
<el-table-column prop="address" label="向上移动">
<template slot-scope="scope">
<el-button size="mini" :disabled="scope.$index === 0" @click="moveUp(scope.$index, scope.row)">
<i class="el-icon-arrow-up"></i>
</el-button>
</template>
</el-table-column>
<el-table-column prop="address" label="向下移动">
<template slot-scope="scope">
<el-button size="mini" :disabled="scope.$index === listTableData.length - 1" @click="moveDown(scope.$index, scope.row)">
<i class="el-icon-arrow-down"></i>
</el-button>
</template>
</el-table-column>
</el-table>
data(){
return{
listTableData:[]
}
},
methods:{
/**
* 操作向上移动
*/
moveUpmoveUp(index) {
console.log(this.listTableData);
// 保存上一条数据
let updata = this.listTableData[index - 1];
// 删除上一条的数据
this.listTableData.splice(index - 1, 1);
// 将上一条数据插入当前的索引数组
this.listTableData.splice(index, 0, updata);
},
/**
* 操作向下移动
*/
moveDown(index) {
// 保存下一条数据
let downData = this.listTableData[index + 1];
// 删除下一条数据
this.listTableData.splice(index + 1, 1);
// 将下一条数据插入当前的索引中
this.listTableData.splice(index, 0, downData);
},
}