只要有重新排序，就更新所有行号

Question

我有一个可以在视图中重新排序的数组中的项目列表，我想要实现的是任何有重新排序的内容，rowNumber属性应该从1更新到最后一个数字

数组列表

[{
    id: 1, Name: 'Jack', rowNumber:0,
},
{
    id: 2, Name: 'Mary', rowNumber:0,
},
{
    id: 5, Name: 'Dan', rowNumber:0,
}
]

JS

 let draggedItem = this.list.splice(event.detail.from,1)[0];
 this.list.splice(event.detail.to,0,draggedItem)
event.detail.complete();
console.log(this.list.forEach(e => {
    e.rowNumber++
}))

目前，我遇到的情况是，在重新排序完成后，每个rowNumber都更新为1

Answer 1

您的代码不正确。e.rowNumber++不是你想的那样。

这样如何：

​

const list = [
    {id: 1, Name: 'Jack', rowNumber:0},
    {id: 2, Name: 'Mary', rowNumber:0},
    {id: 5, Name: 'Dan', rowNumber:0}]
    
const ordered = list.map((e, idx) => ({...e, rowNumber: idx}))
console.log(ordered)

​

Answer 2

这是因为你只是在每个项目中增加0到1，存储在每个对象中的行号可能不是正确的方式-行号是显示或布局的人工产物，也许应该在呈现项目时填充，而不是存储在里面(考虑到它是多么短暂)。但如果您想这样做，那么您可以使用项的索引来为属性赋值，例如

​

console.log(this.list.forEach((e, index) => {
    e.rowNumber = index
}))

​