vue排序

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));  
}

解释:

  1. 更新被拖动元素的 orderNum:直接设置 drag.value[e.newIndex].orderNum = e.newIndex + 1

  2. 避免重复加1:通过创建一个新的 newOrderNums 数组,其中包含了从 1 到 drag.value.length 的顺序数,然后直接将这个顺序数分配给 drag.value 中的每个元素。这样做避免了在循环中比较和修改 orderNum 的复杂性。

  3. 合并并发出事件:如果 lockList.value 和 drag.value 需要合并并发出事件,使用 concat 方法将它们合并。

请注意,根据您的具体需求(例如,如果 lockList.value 和 drag.value 包含重复或需要特定排序的元素),您可能需要调整合并逻辑。此外,如果 label 属性用于其他目的(如唯一标识),请确保在合并或更新数据时考虑到这一点。

相关推荐

  1. vue排序

    2024-07-22 01:28:01       31 阅读
  2. layui-vue + Flask 实现 Table 排序显示

    2024-07-22 01:28:01       60 阅读
  3. <span style='color:red;'>排序</span>

    排序

    2024-07-22 01:28:01      26 阅读
  4. 总结vue3 的一些知识点:MySQL 排序

    2024-07-22 01:28:01       63 阅读
  5. 如何在vue中使用sort对数组进行排序

    2024-07-22 01:28:01       47 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-22 01:28:01       141 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-22 01:28:01       154 阅读
  3. 在Django里面运行非项目文件

    2024-07-22 01:28:01       129 阅读
  4. Python语言-面向对象

    2024-07-22 01:28:01       141 阅读

热门阅读

  1. 项目架构图的最佳实践:绘制、维护与示例

    2024-07-22 01:28:01       39 阅读
  2. C++多态

    C++多态

    2024-07-22 01:28:01      34 阅读
  3. Nginx 不转发请求 IP

    2024-07-22 01:28:01       32 阅读
  4. ctfshow web AK杯

    2024-07-22 01:28:01       31 阅读
  5. 正态分布是什么

    2024-07-22 01:28:01       31 阅读
  6. deploy gitlab through docker

    2024-07-22 01:28:01       29 阅读
  7. 嵌入式软件技术能力

    2024-07-22 01:28:01       28 阅读
  8. Mad MAD Sum-Codeforces Round 960 (Div. 2)

    2024-07-22 01:28:01       32 阅读
  9. js | Core

    js | Core

    2024-07-22 01:28:01      25 阅读