代码实现
<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" 才能有效果
前端工程师、程序员
标签:
element vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~