vue项目中利用splice方法实现table行的上移下移

实现效果

splice 方法

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

array.splice(start, deleteCount, item1, item2,…)

start: 修改的开始位置
deleteCount：要移除或要替换的元素个数。(如果为0，则添加元素）
item1, item2, … ：要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// output: Array ["Jan", "Feb", "March", "April", "May"]

months.splice(1, 3);
console.log(months);
// output: Array ["Jan",  "May"]

实现代码

template部分

<template #action="{ record, index }">
      <a-button type="link" class="action" @click="moveUp(record, index)" :disabled="index === 0">上移</a-button>
      <a-button type="link" class="action" @click="moveDown(record, index)" :disabled="index === tableData.length - 1">
        下移
      </a-button>
</template>

第一条和最后一条禁用上移下移

js部分

const moveUp = (record, index) => {
  if (index > 0) {
    let upDate = tableData[index - 1];
    tableData.splice(index - 1, 1);
    tableData.splice(index, 0, upDate);
  } else {
    message.error('已经是第一条，不可上移', 1);
  }
};
const moveDown = (record, index) => {
  if (index + 1 === tableData.value.length) {
    message.error('已经是最后一条，不可下移', 1);
  } else {
    let downDate = tableData.value[index + 1];
    tableData.splice(index + 1, 1);
    tableData.splice(index, 0, downDate);
  }
};