NG-ZORRO中table改变表格的两行的位子，上移，下移，置顶

最新推荐文章于 2024-01-18 15:02:57 发布

原创

最新推荐文章于 2024-01-18 15:02:57 发布 · 873 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

在使用ANTD的NG-ZORRO组件库时，遇到表格行变动的问题。由于直接使用splice方法无法达到预期效果，需要采用特殊的方法来实现行的上移、下移和置顶操作。通过定义新的方法，并结合splice和unshift，可以成功修改数组元素，从而更新表格展示。

由于ant-zorro组件库里的表格，直接使用splice修改无法生效

需要稍微改下写法

这里是定义方法的地方,依旧使用的是splice和unshift方法

/**
 * @description 数组两个元素换位子
 * @param arr 传入的数组，index1，index2 交换位置的元素
 */
export function swapArr(arr: any[], index1: number, index2: number) {
  arr[index1] = arr.splice(index2, 1, arr[index1])[0];
  return arr;
}

/**
 * @description 数组元素置顶
 * @param arr 传入的数组，index 置顶元素位置
 */
export function toFirst(arr: any[], index: number) {
  if (index !== 0) {
    arr.unshift(arr.splice(index, 1)[0]);
    return arr;
  }
}

下面调用方法

/**
 * @description 上移一位
 * @param index 上移的元素下标
 */
public moveUp(index) {
    if (index === 0) {
      this.message.warning("最顶部的无法上移");
    } else {
      let listdata = swapArr(this.listOfToTopData, index, index - 1);