javascript - 通过索引分配对表进行排序

Question

我有一个对象的数组:

ruta: [
    { 'order': 1, 'id': 121 },
    { 'order': 2, 'id': 123 }
]

我用它作为 buefy 的模型表，同时，我使用扩展名 sortable.js手动对表格行进行排序:

const createSortable = (el, options, vnode) => {
    return Sortable.create(el, {
        ...options,
        onEnd: function (evt) {
            const data = vnode.context.ruta
            const item = data[evt.oldIndex]
            if (evt.newIndex > evt.oldIndex) {
                for (let i = evt.oldIndex; i < evt.newIndex; i++) {
                    data[i] = data[i + 1]
                }
            } else {
                for (let i = evt.oldIndex; i > evt.newIndex; i--) {
                    data[i] = data[i - 1]
                }
            }
            data[evt.newIndex] = item
            //here
            for (let i = 0; i < data.length; i++) {
                data[i].order = i + 1;
            }
        }
    })
} 

表格渲染正确，但我需要更新每次手动排序的order参数以反射(reflect)表格的真实顺序。例如，我需要将第五行移至表格的开头，因此其 order 参数应为 1，其余行需要反射(reflect) 2、3、4 和 5。

正如您在代码中看到的，我已经尝试过:

for (let i = 0; i < data.length; i++) {
    data[i].order = i + 1;
}

因为我想从1开始顺序排列值。我还尝试将更改放入 if/else block 中:

if
    data[i].order = i + 1;
else
    data[i].order = i - 1;

但是也没有成功。行的顺序以错误的方式更改。

Answer 1

您已经在 the Spanish SO site 上问过这个问题我在那里给了你一个解决方案。我知道您已经解决了该问题，但我将针对您的问题发布另一个解决方案，因为它将来可能对其他用户有用。

首先，我已经向您解释了为什么会出现此问题:如果您更改模型的顺序并更改其索引的值，Vue will not detect the change ，您需要以其他方式修改数组，例如进行拼接。在您的代码中，仅当您更改 order 参数时，Vue 才会检测到更改，并且此时列表将被手动排序，并且 的每个索引的值array 已更改，因此 View 将错误更新:

┌───────────────┬───────────────┬──────────────────┬───────────────┐
│ Initial state │ -> Model      │ Manually sorting │ -> Model      │
├───────────────┼───────────────┼──────────────────┼───────────────┤
│ 1 - item 1    │ Array index 0 │ 1 - item 4       │ Array index 3 │
│ 2 - item 2    │ Array index 1 │ 2 - item 1       │ Array index 0 │
│ 3 - item 3    │ Array index 2 │ 3 - item 2       │ Array index 1 │
│ 4 - item 4    │ Array index 3 │ 4 - item 3       │ Array index 2 │
└───────────────┴───────────────┴──────────────────┴───────────────┘

我之前给你的解决方案:

const createSortable = (el, options, vnode) => {

    // Copy the order property
    vnode.context.data.forEach( (obj) => {obj.norder = obj.order} );

    // Create an array of orders
    const orders = vnode.context.data.map((obj) => obj.order);

    return Sortable.create(el, {
        ...options,
        onEnd: function (evt) {

            const data = vnode.context.data;      
  
            // Update the position of the objects
            orders.splice(evt.newIndex, 0, ...orders.splice(evt.oldIndex, 1));
  
            // Change the order parameter
            data.forEach((obj) => {        
                obj.order = orders.findIndex((n) => n === obj.norder) + 1;
            });
  
        }
    });
};

工作示例:https://codepen.io/elchininet/pen/JLQqEV

另一个解决方案:

另一个解决方案是在每次移动后重置手动排序，并使用拼接更改数组顺序。看看:

const createSortable = (el, options, vnode) => {

    let order = [];

    return Sortable.create(el, {
        ...options,
        
        onStart: function (evt) {
            // when the sort starts, store the initial order of the array
            order = this.toArray();
        },

        onEnd: function (evt) {
            
            // when the sort ends, set the order to the initial state
            this.sort(order);

            // change the order using splice
            const data = vnode.context.data;
  
            data.splice(evt.newIndex, 0, ...data.splice(evt.oldIndex, 1));

            // now it is safe, you can update the order parameter
            data.forEach((o, i) => {
                o.order = i + 1;
            });

        }

    });

};

这里有一个工作示例:https://codepen.io/elchininet/pen/MVNaON