vue3 + element plus+ts 实现穿梭框右侧数据上下移动功能_vue穿梭框移动

vue3 + element plus+ts 实现穿梭框右侧数据上下移动功能

技术栈

最近在迁移老的vue2项目至vue3，并且同时使用ts，有段时间没更新了。
用啥都一样，只要你会学，用啥啥都行。
不会学也是，用啥都一样，用啥啥不行。

需求

实现element plus中的穿梭框（即el-transfer）右侧数据上下移动功能。
我知道网上有很多类似的例子，但是vue3+ts+element plus就我这一个，能复制总比你自己写要快，对吧。
字看不懂的话看图：

懂了吧。

实现思路

（给中级开发看的，中级开发看完这段应该就会了）

1. 打开el-transfer标签内的target-order="push"属性，这是基本，默认是顺序是original，你怎么操作数据顺序都不会变的；
2. el-transfer的v-model属性绑定的值就是右侧部分的列表（不要管官方KPI文档怎么写，它就是右侧部分的数据数组），换言之，你改变了v-model绑定的数组中元素的顺序，右侧部分内容的顺序就变了，简单吧。
3. right-check-change方法中，你可以获取到右侧部分选中的项的key值组成的数组；
4. 比较坑的一点是，你拿到的只是key值（不是索引），你需要操作一下，根据key值取到相应的索引；
5. 最后的小技巧，也是逻辑核心的一句话，上移就是当前元素和前一个元素调换位置，下移就是当前元素和下一个元素调换位置；
6. 处理下边界值，即在最上面不能上移和在最下面不能下移的情况，搞定。

简单吧，估计大学里前几节编程课就教会你数组怎么互换两个元素了。

示例代码

（给初级小白看的，是在不会你就把这一大段复制进去，我假数据都帮你造好了，先让页面效果出来，慢慢研究）

// An highlighted block
<template>
    <div style="text-align: center">
        <el-transfer v-model="rightValue" style="text-align: left; display: inline-block" filterable target-order="push"
            @right-check-change="rightCheckChange" :render-content="renderFunc" :titles="['可选列', '可见列']"
            :button-texts="['To left', 'To right']" :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}',
            }" :data="data" @change="handleChange">
            <!-- <template #left-footer>
                <el-button class="transfer-footer" size="small">Operation</el-button>
            </template> -->
            <template #right-footer>
                <el-button class="transfer-footer" size="small" @click="moveUp"><el-icon>
                        <CaretTop />
                    </el-icon></el-button>
                <el-button class="transfer-footer" size="small" @click="moveDown"><el-icon>
                        <CaretBottom />
                    </el-icon></el-button>
            </template>
        </el-transfer>
    </div>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import type { VNode, VNodeProps } from 'vue'

interface Option {
    key: number
    label: string
    disabled: boolean
}

const generateData = (): Option[] => {
    return [
        {
            key: 1,
            label: 'ID',
            disabled: false,
        },
        {
            key: 2,
            label: '标题',
            disabled: false,
        },
        {
            key: 3,
            label: '负责人',
            disabled: false,
        },
        {
            key: 4,
            label: '状态',
            disabled: false,
        },
        {
            key: 5,
            label: '创建时间',
            disabled: false,
        },
        {
            key: 6,
            label: '更新时间',
            disabled: false,
        },
        {
            key: 7,
            label: '创建人',
            disabled: false,
        },
    ]
}

const data = ref(generateData())
const rightValue = ref<number[]>([])

const renderFunc = (
    h: (type: string, props: VNodeProps | null, children?: string) => VNode,
    option: Option
) => {
    //自定义渲染函数，可在这里处理每一项的显示内容
    return h('span', null, option.label)
}
const handleChange = (
    value: number | string,
    direction: 'left' | 'right',
    movedKeys: string[] | number[]
) => {
    console.log(value, direction, movedKeys)
    console.log('rightValue', rightValue)
}

const selectRightValue = ref<number[]>([]) //右侧被选中的元素的key值组成的数组
const rightCheckChange = (arr: Array<number>) => {
	//右侧选中元素触发的时间
    console.log('右侧选中', arr)
    selectRightValue.value = arr
}

const moveUp = () => {
    console.log('选中', selectRightValue.value[0])
    if (selectRightValue.value?.length === 1) {
        let selectKey = rightValue.value.indexOf(selectRightValue.value[0]) //右侧数组被选中的元素的索引index
        console.log(selectKey)
        if (selectKey === 0) {
            window.alert('已经在最顶部，不能再上移')
        } else {
            let temp = rightValue.value[selectKey - 1];
            rightValue.value.splice(selectKey - 1, 1, rightValue.value[selectKey])
            rightValue.value.splice(selectKey, 1, temp)
            console.log('123', rightValue.value)
        }
    } else {
        window.alert('只能且必须选中一项要移动的列')
    }
}
const moveDown = () => {
    if (selectRightValue.value?.length === 1) {
        let selectKey = rightValue.value.indexOf(selectRightValue.value[0]) //右侧数组被选中的元素的索引index
        console.log(selectKey)
        if (
            selectKey + 1 === rightValue.value.length
        ) {
            window.alert('已经在最底部，不能再下移')
        } else {
            let temp = rightValue.value[selectKey + 1];
            rightValue.value.splice(selectKey + 1, 1, rightValue.value[selectKey])
            rightValue.value.splice(selectKey, 1, temp)
            console.log('123', rightValue.value)
        }
    } else {
        window.alert('只能且必须选中一项要移动的列')
    }
}
</script>
  
<style>
.transfer-footer {
    margin-left: 15px;
    padding: 6px 5px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

别觉得简单，我知道很简单，两句至理名言奉上：
虚怀若谷不代表你没有本事。
眼高手低最后出丑的是自己。