使用Vue3實現(xiàn)一個穿梭框效果的示例代碼

更新時間：2023年12月01日 08:46:24 作者：JacksonChen

這篇文章主要給大家介紹了如何使用?Vue3?實現(xiàn)一個穿梭框效果,當選中數(shù)據(jù),并且點擊相對應的方向箭頭時,選中的數(shù)據(jù)會發(fā)送到對面,并且數(shù)據(jù)會保持正確的順序進行排列,文中有詳細的代碼講解,具有一定的參考價值,需要的朋友可以參考下

效果

當選中數(shù)據(jù)，并且點擊相對應的方向箭頭時，選中的數(shù)據(jù)會發(fā)送到對面，并且數(shù)據(jù)會保持正確的順序進行排列。

在線預覽：https://chenyajun.fun/#/transfer

實現(xiàn)

左右兩邊邏輯一致，這里只對左側(cè)的進行分析

先看一下 html 結(jié)構(gòu) 方便理解

      <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>

數(shù)據(jù)處理

首先初始化 10 條穿梭框數(shù)據(jù)，key 屬性用于排序，label 用于展示數(shù)據(jù)，最后為數(shù)據(jù)添加 checked 屬性（主要用于標記是否被選中），然后將數(shù)據(jù)賦值給左邊的列表 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
}

點擊狀態(tài)取反

上面我們初始化了數(shù)據(jù)，下面需要做的是當點擊每一項 option 的時候讓狀態(tài)取反。

點擊 option 時只需把相應的 index 傳入，然后進行取反操作即可。

// 點擊進行狀態(tài)取反
function handleTransferLeft(currentIndex) {
  listLeft.value[currentIndex].checked = !listLeft.value[currentIndex].checked
}

比例狀態(tài)

我們看到了上面的已選數(shù)據(jù)和總數(shù)據(jù)的比例狀態(tài)

先拿到已選數(shù)據(jù)

// 左側(cè)checked的數(shù)據(jù)
const currentCheckedLeft = computed(() => {
  return listLeft.value.filter((item) => item.checked)
})

將左側(cè)選中數(shù)據(jù)的長度比上數(shù)據(jù)總長度即可

點擊箭頭進行穿梭

// 點擊右箭頭
function toRight() {
  // 對選中數(shù)據(jù)進行深拷貝
  const deepCloneData = JSON.parse(JSON.stringify(currentCheckedLeft.value))
  // 把剛選擇的數(shù)據(jù)狀態(tài)進行清除
  deepCloneData.forEach((item) => {
    item.checked = false
  })
  // 把選中的數(shù)據(jù)添加到右邊 需要把剛選擇的數(shù)據(jù)狀態(tài)進行清除
  listRight.value.push(...deepCloneData)
  // 對右邊數(shù)據(jù)進行重新排序
  listRight.value.sort((a, b) => a.key - b.key)

  // 找到未選中數(shù)據(jù) 進行重新賦值
  const noCheckedLeftData = listLeft.value.filter((item) => !item.checked)
  listLeft.value = noCheckedLeftData
}

先對選中數(shù)據(jù)清除狀態(tài)，因為如果不清除狀態(tài)可能會導致穿梭過的的數(shù)據(jù)仍然還是選中。

如圖所示：1，2是剛穿梭過去的數(shù)據(jù)，仍保留狀態(tài)

注意需要對選中數(shù)據(jù)進行深拷貝，因為下面需要用到未選中的數(shù)據(jù)，如果不進行深拷貝，那下面再去篩選未選中的數(shù)據(jù)時就會把所有的數(shù)據(jù)選中。

  // 對選中數(shù)據(jù)進行深拷貝
  const deepCloneData = JSON.parse(JSON.stringify(currentCheckedLeft.value))
  // 把剛選擇的數(shù)據(jù)狀態(tài)進行清除
  deepCloneData.forEach((item) => {
    item.checked = false
  })

接下來篩選出來選中數(shù)據(jù)后，將數(shù)據(jù)添加到右邊的數(shù)組

 // 把選中的數(shù)據(jù)添加到右邊 需要把剛選擇的數(shù)據(jù)狀態(tài)進行清除
  listRight.value.push(...deepCloneData)

然后再對右邊的數(shù)組進行排序

  // 對右邊數(shù)據(jù)進行重新排序
  listRight.value.sort((a, b) => a.key - b.key)

現(xiàn)在已經(jīng)將數(shù)據(jù)穿梭到右側(cè)，那怎么去除左側(cè)已穿梭的數(shù)據(jù)呢？

篩選出來左邊未選擇的數(shù)據(jù)，重新賦值給左邊數(shù)組即可

  // 找到未選中數(shù)據(jù) 進行重新賦值
  const noCheckedLeftData = listLeft.value.filter((item) => !item.checked)
  listLeft.value = noCheckedLeftData

這一步也是上面為什么深拷貝的原因。

如果不進行深拷貝，如圖所示：

已經(jīng)穿梭了過去，但是取未篩選數(shù)據(jù)時，因為上面的狀態(tài)已經(jīng)取反，這里都會選擇到。

總結(jié)

我們需要知道如果要實現(xiàn)一個穿梭框效果，我們大概都需要做哪些東西呢？

那首先是對左側(cè)的初始化數(shù)據(jù)，我們需要對數(shù)據(jù)進行加工，添加 checked 屬性，方便后面進行篩選。

其次是我們找出我們選中的數(shù)據(jù)，添加到右側(cè)，同時把左側(cè)選中的數(shù)據(jù)進行移除。