onEnd
函数示例,它假设 drag.value
是一个包含多个对象(每个对象至少包含 orderNum
和 label
属性)的数组,且您希望在拖动结束后更新所有元素的 orderNum
以反映新的顺序:
function onEnd(e) {
// 首先,确保新位置的 orderNum 正确
drag.value[e.newIndex].orderNum = e.newIndex + 1;
// 打印当前被拖动的元素(可选)
console.log('当前拖动的元素:', drag.value[e.newIndex]);
// 初始化一个数组来存储新的 orderNum,以避免不必要的重复计算
const newOrderNums = Array(drag.value.length).fill(0).map((_, index) => index + 1);
// 使用新的 orderNums 更新 drag.value 中的每个元素
drag.value.forEach((item, index) => {
item.orderNum = newOrderNums[index];
});
// 打印更新后的 drag.value
console.log('修改后的 drag.value:', drag.value);
// 假设 lockList.value 也是一个数组,您想将其与 drag.value 合并后发出
// 注意:这里假设 lockList.value 和 drag.value 的合并是有意义的
emit("drag", lockList.value.concat(drag.value));
}
解释:
更新被拖动元素的
orderNum
:直接设置drag.value[e.newIndex].orderNum = e.newIndex + 1
。避免重复加1:通过创建一个新的
newOrderNums
数组,其中包含了从 1 到drag.value.length
的顺序数,然后直接将这个顺序数分配给drag.value
中的每个元素。这样做避免了在循环中比较和修改orderNum
的复杂性。合并并发出事件:如果
lockList.value
和drag.value
需要合并并发出事件,使用concat
方法将它们合并。
请注意,根据您的具体需求(例如,如果 lockList.value
和 drag.value
包含重复或需要特定排序的元素),您可能需要调整合并逻辑。此外,如果 label
属性用于其他目的(如唯一标识),请确保在合并或更新数据时考虑到这一点。