vue+elment-UI实现列表上下移动

import Vue from 'vue' //需引入vue

data: {

dataList: [],

}

// 上移

function up(index) {  // index: 当前行索引

// 获取当前行和上一行

let thisRow = this.dataList[index];

let lastRow = this.dataList[index-1];

// 当前行的上一行的sort(排序字段)值

let thisRowSort = thisRow.sort; // 当前行sort值

let lastRowSort = lastRow.sort; // 上一行sort值

// 调整sort(排序字段)值

thisRow.sort = lastRowSort; // 当前行的sort值调整为上一行的sort值

lastRow.sort = thisRowSort; // 上一行的sort值调整为当前行的sort值

// 调整列表中的位置

Vue.set(this.dataList, index - 1, thisRow);

Vue.set(this.dataList, index, lastRow)

// 进行下一步操作

......

}

// 下移

function down(index) {  // index: 当前行索引

// 获取当前行和下一行

let thisRow = this.dataList[index];

let nextRow = this.dataList[index+1];

// 当前行的下一行的sort(排序字段)值

let thisRowSort = thisRow.sort; // 当前行sort值

let nextRowSort = nextRow.sort; // 下一行sort值

// 调整sort(排序字段)值

thisRow.sort = nextRowSort; // 当前行的sort值调整为下一行的sort值

nextRow.sort = thisRowSort; // 下一行的sort值调整为当前行的sort值

// 调整列表中的位置

Vue.set(this.dataList, index + 1, thisRow);

Vue.set(this.dataList, index, nextRow)

// 进行下一步操作

......

}