代码实现
<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" 才能有效果
前端工程师、程序员