Vue2 改变列表排序：上移,下移,置顶,置底_vue2 vfor 改变顺序

概述

技术上使用 Vue2、 ElementUI。对列表做上移,下移,置顶,置底等操作。

效果

实现

HML

<template>
    <div>
        <div class="rows" v-for="(item,index) in rows" :key="index"  >
            <div> {{ item.id + item.name }}</div>
            <div class="order-btns">
                <el-button @click="orderClick(0,index)" size="mini" type="primary" circle icon="el-icon-arrow-up" class="btn"/>
                <el-button @click="orderClick(1,index)" size="mini" type="primary" circle icon="el-icon-arrow-down" class="btn"/>
                <el-button @click="orderClick(2,index)" size="mini" type="success" circle icon="el-icon-top" class="btn"/>
                <el-button @click="orderClick(3,index)" size="mini" type="success" circle icon="el-icon-bottom" class="btn"/>
            </div>
        </div>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13

CSS

<style lang="stylus" scoped>
.rows {
    display: flex;
    margin: 15px;
    .order-btns {
        margin-left: 10px;
    }
}
</style>
1
2
3
4
5
6
7
8
9

Javascript

• 代码第 16 行，深度拷贝原数组，因为下面会使用 splice 方法，避免影响原数组。Array splice 方法会改变原数组；
• 代码第 22 行，上移操作，当移动下标为 0，直接赋值为 0。否则下标减 1；
• 代码第 26 行，下移操作，当移动下标等于数组长度减 1，即为当前值。否则下标加 1；
• 代码第 30 行，置顶操作，移动下标直接赋值为 0；
• 代码第 34 行，置底操作，移动下标直接赋值为数组长度减 1；

export default {
    data() {
        return {
            rows: [
                { id:1, name: '测试'},
                { id:2, name: '测试'},
                { id:3, name: '测试'},
                { id:4, name: '测试'},
                { id:5, name: '测试'},
            ]
        }
    },
    methods: {
        orderClick(type, i) {
            // 深度拷贝原数组，因为下面会使用 splice 方法，避免影响原数组
			let arr = [...this.rows];
            // 默认下标 0
			let index = 0;
            // 判断
			switch (type) {
				case 0: {// 上移
					index = i === 0 ? i : (i - 1);
					break;
				}
				case 1: {// 下移
					index = i === arr.length - 1 ? i : (i + 1);
					break;
				}
				case 2: {// 置顶
					index = 0;
					break;
				}
				case 3: {// 置底
					index = arr.length - 1;
					break;
				}
			}
			// 先删除原有
			let item = arr.splice(i, 1);
			// 再删除新地方
			arr.splice(index, 0, item[0]);
			this.rows = arr;
		},
    }
}
</script>
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