element 穿梭框el-transfer 实现上下移动选中的数据顺序

代码实现

<template>
  <div>
    <el-button type="primary" size="default" @click="upDown('up')">up</el-button>
    <el-button type="primary" size="default" @click="upDown('down')">down</el-button>

  </div>
  <el-transfer v-model="chooseRole" target-order="push" :data="data" @right-check-change="rightCheckHandler" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: string;
  label: string;
}

const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: 'fieid_' + i,
      label: `Option ${i}`,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const chooseRole = ref([])

watch(chooseRole, (val) => {
  console.log(val, "slkvnsldjsfkjsdlfkjsd")
})

const rightChecks = ref<Array<any>>([])
function rightCheckHandler(val) {
  rightChecks.value = val;
  console.log(rightChecks.value, "rightCheckHandler")
}

function upDown(direction: 'up' | 'down') {

  if (direction === 'up') {
    rightChecks.value.map(i => {
      const index = chooseRole.value.findIndex(t => t == i)
      chooseRole.value.splice(index, 1);
      // @ts-expect-error: splice第三个参数没有类型声明，会报错
      chooseRole.value.splice(index - 1, 0, i);
    })
  } else {
    rightChecks.value.map(i => {
      const index = chooseRole.value.findIndex(t => t == i)
      chooseRole.value.splice(index, 1);
      // @ts-expect-error: splice第三个参数没有类型声明，会报错
      chooseRole.value.splice(index + 1, 0, i);
    })
  }
}
</script>

注意：穿梭框属性要加上target-order="push" 才能有效果