antdv table 数据操作升序、降序、删除、增加功能

最新推荐文章于 2024-05-15 11:08:23 发布

原创最新推荐文章于 2024-05-15 11:08:23 发布 · 864 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

vue3 同时被 3 个专栏收录

12 篇文章

订阅专栏

es6

8 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript进行表格数据操作的方法，包括数据项的升序及降序调整、删除和新增等操作。通过具体的代码示例展示了如何实现这些功能。

let newData: any[] = [];

1、升序--向上移动一格主要代码

newData.filter((item, index) => {
    if (item.key == data.key) {
        newData[index] = newData.splice(index - 1, 1, newData[index])[0];
    }
});

state.dataSource = newData;

2、降序 --向下移动一格主要代码（newData[index] = newData.splice(index+1, 1, newData[index])[0];这种方式table报错）

newData.filter((item, index) => {
    if (item.key == data.key) {
        newData.splice(index, 1);
        newData.splice(index + 1, 0, data);
    }
});

state.dataSource = newData;

3、删除

newData = state.dataSource.filter(item => item.key !== data.key);
state.dataSource = newData;

4、增加

let length = state.dataSource.length;
length++;
const newObj: { key: string; name: string } = {
    key: `${length}`,
    name: '',
};
state.dataSource.push(newObj);