el-table 通过上下移动按钮改变行顺序

158 阅读1分钟
<el-table-column label="操作" :resizable="false" min-width="90" align="center">
							<template slot-scope="scope">
								<el-button @click.native.prevent="deleteRow(scope.$index, scope.row, 'up')" type="text"
									size="small">上移</el-button>
								<el-button @click.native.prevent="deleteRow(scope.$index, scope.row, 'down')"
									type="text" size="small">下移</el-button>
							</template>
						</el-table-column>
//上下移动
			deleteRow(index, row, type) {
				if (type === 'up') {
					if (index === 0) {
						return
					}
					//修改当前和被替换的row的intt_ord 排序值
					this.tableData2[index].intt_ord = index
					this.tableData2[index - 1].intt_ord = index + 1
					// 在上一项插入该项
					this.tableData2.splice(index - 1, 0, (this.tableData2[index]))
					// 删除后一项
					this.tableData2.splice(index + 1, 1)
				} else if (type === 'down') {
					//如果为最后一项
					if (index === (this.tableData2.length - 1)) {
						return
					}
					//修改当前和被替换的row的intt_ord
					this.tableData2[index].intt_ord = index + 2
					this.tableData2[index + 1].intt_ord = index + 1
					// 在下一项插入该项
					this.tableData2.splice(index + 2, 0, (this.tableData2[index]))
					// 删除前一项
					this.tableData2.splice(index, 1)
				}
			},

image.png