1.先看一下效果： 在table中这样写就好了：
<el-table-column align="center" label="移动操作" min-width="80"> <template slot-scope="scope"> <el-button size="medium" type='text' style="font-size:20px;" @click.stop="configUp(scope.$index, scope.row)">↑</el-button> <el-button size="medium" type='text' style="font-size:20px;" @click.stop="configDown(scope.$index, scope.row)">↓</el-button> </template> </el-table-column>然后就是要引入 import Vue from 'vue'
那方法就是以下代码了：
// 上移 configUp(index, row) { if (index === 0) { this.$message({ message: '已经是列表中第一行!', type: 'warning' }) } else { const temp = this.listyst[index - 1] Vue.set(this.listyst, index - 1, this.listyst[index]) Vue.set(this.listyst, index, temp) this.showListbut = true } }, // 下移 configDown(index, row) { if (index === (this.listyst.length - 1)) { this.$message({ message: '已经是列表中最后一行!', type: 'warning' }) } else { const i = this.listyst[index + 1] Vue.set(this.listyst, index + 1, this.listyst[index]) Vue.set(this.listyst, index, i) this.showListbut = true } },其中this.listyst是:data = "listyst" 的表格数据
再就是移动完把顺序传给后台的方法：
// 移动完保存 budgeIcle keepBut() { //这个是移动完要把orderNum按新的顺序传给后台 for (var i = 0; i < this.listyst.length; i++) { this.listyst[i]['orderNum'] = (i + 1) } const tempData = { list: this.listyst, opUser: this.opUser, opUserName: this.opUserName } budgeIcle(tempData).then(response => { if (response.data.code == 200) { this.$message({ title: '成功', message: '排序成功', type: 'success', duration: 3000 }) // this.getList() } else { this.$notify({ title: '警告', message: response.data.msg, type: 'warning', duration: 3000 }) } }) this.showListbut = false },这个就是这样。
