使用 Vue3 实现一个穿梭框效果

效果

当选中数据，并且点击相对应的方向箭头时，选中的数据会发送到对面，并且数据会保持正确的顺序进行排列。

在线预览：chenyajun.fun/#/transfer

实现

左右两边逻辑一致，这里只对左侧的进行分析

先看一下 html 结构 方便理解

      <div class="module-wrapper">
        <div class="module-head">
          <span>list1</span>
          <span>{{ currentSelectLeft }}</span>
        </div>
        <div class="module-content">
          <div v-if="!listLeft.length" style="text-align: center">No data</div>
          <div class="module-item" v-for="(item, index) in listLeft" @click="handleTransferLeft(index)">
            <input style="width: 20px; height: 20px" type="checkbox" :checked="item.checked" />
            <span
              :style="{
                color: item.checked ? '#68b2ff' : '#000',
              }"
              >{{ item.label }}</span
            >
          </div>
        </div>
      </div>

数据处理

首先初始化 10 条穿梭框数据，key 属性用于排序，label 用于展示数据，最后为数据添加 checked 属性（主要用于标记是否被选中），然后将数据赋值给左边的列表 listLeft。

function getListData() {
  let data = []
  for (let index = 1; index <= 10; index++) {
    data.push({
      key: index,
      label: 'option' + index,
    })
  }

  //对data进行处理 默认我们认为没有checked属性
  data.forEach((item) => {
    item.checked = false
  })
  listLeft.value = data
}

点击状态取反

上面我们初始化了数据，下面需要做的是当点击每一项 option 的时候让状态取反。

点击 option 时只需把相应的 index 传入，然后进行取反操作即可。

// 点击进行状态取反
function handleTransferLeft(currentIndex) {
  listLeft.value[currentIndex].checked = !listLeft.value[currentIndex].checked
}

比例状态

我们看到了上面的已选数据和总数据的比例状态
先拿到已选数据

// 左侧checked的数据
const currentCheckedLeft = computed(() => {
  return listLeft.value.filter((item) => item.checked)
})

将左侧选中数据的长度 比上 数据总长度即可

// 左侧选中的比例数目
const currentSelectLeft = computed(() => {
  return currentCheckedLeft.value.length + '/' + listLeft.value.length
})

点击箭头进行穿梭

// 点击右箭头
function toRight() {
  // 对选中数据进行深拷贝
  const deepCloneData = JSON.parse(JSON.stringify(currentCheckedLeft.value))
  // 把刚选择的数据状态进行清除
  deepCloneData.forEach((item) => {
    item.checked = false
  })
  // 把选中的数据添加到右边 需要把刚选择的数据状态进行清除
  listRight.value.push(...deepCloneData)
  // 对右边数据进行重新排序
  listRight.value.sort((a, b) => a.key - b.key)

  // 找到未选中数据 进行重新赋值
  const noCheckedLeftData = listLeft.value.filter((item) => !item.checked)
  listLeft.value = noCheckedLeftData
}

先对选中数据清除状态，因为如果不清除状态可能会导致穿梭过的的数据仍然还是选中。

如图所示：1，2是刚穿梭过去的数据，仍保留状态

注意需要对选中数据进行深拷贝，因为下面需要用到未选中的数据，如果不进行深拷贝，那下面再去筛选未选中的数据时就会把所有的数据选中。

  // 对选中数据进行深拷贝
  const deepCloneData = JSON.parse(JSON.stringify(currentCheckedLeft.value))
  // 把刚选择的数据状态进行清除
  deepCloneData.forEach((item) => {
    item.checked = false
  })

接下来筛选出来选中数据后，将数据添加到右边的数组

 // 把选中的数据添加到右边 需要把刚选择的数据状态进行清除
  listRight.value.push(...deepCloneData)

然后再对右边的数组进行排序

  // 对右边数据进行重新排序
  listRight.value.sort((a, b) => a.key - b.key)

现在已经将数据穿梭到右侧，那怎么去除左侧已穿梭的数据呢？

筛选出来左边未选择的数据，重新赋值给左边数组即可

  // 找到未选中数据 进行重新赋值
  const noCheckedLeftData = listLeft.value.filter((item) => !item.checked)
  listLeft.value = noCheckedLeftData

这一步也是上面为什么深拷贝的原因。

如果不进行深拷贝，如图所示：

已经穿梭了过去，但是取未筛选数据时，因为上面的状态已经取反，这里都会选择到。

总结

我们需要知道如果要实现一个穿梭框效果，我们大概都需要做哪些东西呢？

那首先是对左侧的初始化数据，我们需要对数据进行加工，添加 checked 属性，方便后面进行筛选。

其次是我们找出我们选中的数据，添加到右侧，同时把左侧选中的数据进行移除。

源码

GitHub：github.com/chenyajun-c...

所有源码已经同步提交 GitHub，如果觉得对你有帮助或者启发的话，可以给作者点下 star⭐