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

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

 

NG-ZORRO中table改变表格的两行的位子,上移,下移,置顶_第1张图片

需要稍微改下写法

这里是定义方法的地方,依旧使用的是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);
      this.listOfToTopData = this.listOfToTopData.map(item => {
        return {
          ...item,
        };
      });
    }
  }

/**
 * @description 下移一位
 * @param index 下移的元素下标
 */
  public moveDown(index) {
    if (index === this.listOfToTopData.length - 1) {
      this.message.warning("最底部的无法下移");
    } else {
      let listdata = swapArr(this.listOfToTopData, index, index + 1);
      this.listOfToTopData = this.listOfToTopData.map(item => {
        return {
          ...item,
        };
      });
    }
  }

/**
 * @description 置顶元素
 * @param index 置顶的元素下标
 */
  public toTop(index) {
    if (index === 0) {
      this.message.warning("数据已经置顶");
    } else {
      let listdata = toFirst(this.listOfToTopData, index);
      this.listOfToTopData = this.listOfToTopData.map(item => {
        return {
          ...item,
        };
      });
    }
  }

这里的listOfToTopData 就是需要操作的数组元素。

NG-ZORRO中table改变表格的两行的位子,上移,下移,置顶_第2张图片

能实现效果。

你可能感兴趣的:(JS,angular)