在Vuejs中如何不通过交换操作调整数组元素的位置

实现逻辑 #

你需要实现的是单元素位置移动，其余元素自动补位的效果，用数组原生splice方法即可实现，不需要交换两个元素：

通用封装方法 #

// arr：要操作的数组，fromIndex：待移动元素的原索引，toIndex：目标位置索引
function moveElement(arr, fromIndex, toIndex) {
  // 索引越界直接返回原数组
  if (fromIndex < 0 || toIndex < 0 || fromIndex >= arr.length || toIndex >= arr.length) return arr
  // 取出原位置的元素
  const target = arr.splice(fromIndex, 1)[0]
  // 插入到目标位置
  arr.splice(toIndex, 0, target)
}

业务代码替换 #

把你原来交换元素的三行代码，替换为对应调用即可：

// 示例：把索引为6的元素移动到索引1的位置，无需交换
moveElement(data.groups_with_selected, 6, 1)

注意事项 #

• 该方法会直接修改原数组，splice是Vue框架兼容的响应式数组方法，Vue2/Vue3都可以直接触发视图更新，无需额外处理
• 如果需要反向移动（比如把索引1的元素移动到索引6的位置），只需要调换参数里的fromIndex和toIndex即可：

  moveElement(data.groups_with_selected, 1, 6)
  

内容的提问来源于stack exchange，提问作者T dhanunjay