如何实现ArrayList的顺序调整与删除？附Vue示例代码求助

核心逻辑 #

上下移动元素

• 给每个按钮绑定对应方法，必须传入当前元素的索引——这是定位元素在数组中位置的关键
• 上移：判断当前索引不是0（不是第一个元素），就把它和前一个元素交换位置，用数组的splice方法来做，Vue能自动检测到这个变更并更新DOM
• 下移：判断当前索引不是数组最后一位，和后一个元素交换位置即可
• 如果你的order字段需要和实际顺序同步，移动后要重新更新所有元素的order值

删除元素

• 同样传入当前元素的索引，用splice(index, 1)直接移除对应位置的元素，Vue会自动刷新列表

修改后的完整代码 #

模板部分

<ul id="example-1">
  <li v-for="(item, index) in items" :key="item.order">
    {{ item.message }}
    <!-- 第一个元素不能上移，添加禁用状态 -->
    <v-btn @click="moveUp(index)" :disabled="index === 0">up</v-btn>
    <!-- 最后一个元素不能下移，添加禁用状态 -->
    <v-btn @click="moveDown(index)" :disabled="index === items.length - 1">down</v-btn>
    <v-btn @click="deleteItem(index)">delete</v-btn>
  </li>
</ul>

脚本部分

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'John', order: 1 },
      { message: 'Alie', order: 2 },
      { message: 'Kim', order: 3 },
      { message: 'Jane', order: 4 },
      { message: 'Nana', order: 5 },
    ]
  },
  methods: {
    moveUp(index) {
      // 保存当前元素，删除后插入到前一位
      const currentItem = this.items[index];
      this.items.splice(index, 1);
      this.items.splice(index - 1, 0, currentItem);
      // 同步更新order字段（不需要可以删掉这行）
      this.syncOrder();
    },
    moveDown(index) {
      const currentItem = this.items[index];
      this.items.splice(index, 1);
      this.items.splice(index + 1, 0, currentItem);
      this.syncOrder();
    },
    deleteItem(index) {
      this.items.splice(index, 1);
      this.syncOrder();
    },
    syncOrder() {
      // 让每个元素的order和数组索引对应
      this.items.forEach((item, idx) => {
        item.order = idx + 1;
      });
    }
  }
})

注意点 #

• v-for一定要加:key，绑定唯一标识（比如item.order），避免DOM更新出问题
• 给上下移按钮加disabled，防止用户点无效操作
• 用splice修改数组是因为Vue对splice、push这类数组方法有自动监听，能实时更新页面；如果直接修改数组索引（比如this.items[index] = this.items[index-1]），Vue可能检测不到变更

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