2024年3月9日发(作者：)

vue穿梭框实现上下移动

Vue穿梭框是一种常见的交互方式，用于在两个列表之间进行数据的

选择和移动。在实际项目中，我们通常需要实现上下移动功能，以便用户

可以方便地将选中的数据进行调整顺序。

下面我们来详细介绍如何使用Vue实现穿梭框的上下移动功能。

结构

首先，在HTML中定义一个含有两个列表的穿梭框。

```

```

2. Vue实例

在Vue实例中定义两个数组代表左侧和右侧的列表数据，同时定义一

个选中项的数组用于存储用户选择的数据。

```

new Vue

el: '#app',

data:

leftItems:

{ id: 1, name: '选项1' },

{ id: 2, name: '选项2' },

{ id: 3, name: '选项3' },

{ id: 4, name: '选项4' },

{ id: 5, name: '选项5' }

],

rightItems: [],

selectedItems: []

},

methods:

moveU

//获取选中项的索引

const index = (item => );

//上移操作

if (index > 0)

(index - 1, 0,

(index, 1)[0]);

}

},

moveDow

//获取选中项的索引

const index = (item => );

//下移操作

if (index < - 1)

(index + 1, 0,

(index, 1)[0]);

}

}

}

});

```

3.实现上下移动功能

在Vue实例的methods中定义`moveUp`和`moveDown`两个方法，分别

实现上移和下移的操作。

- `moveUp`方法：首先获取选中项的索引，然后判断索引是否大于0，

如果是则执行上移操作，即将选中项的前一项和选中项进行位置调换。

- `moveDown`方法：同样获取选中项的索引，然后判断索引是否小于

选中项数组长度减1，如果是则执行下移操作，即将选中项的后一项和选

中项进行位置调换。

通过以上操作，我们就实现了Vue穿梭框的上下移动功能。用户可以

通过点击上移和下移按钮，将选中的项在左右两个列表之间进行移动，从

而调整选中项的顺序。

总结