vue el-table 多选列表上移、下移_vue table表个上下排序调整

let moveSelectList = {
/**
     * moveUp 勾选列表数据上移
     * multipleSelection 勾选的数据（已按在列表list中的下标从小到大排序）
     * list 当前操作的列表
     * */
    moveUp: moveUp(multipleSelection, list) {
        //index当前数据在规则条件列表中的下标 上移从下标最小的开始
        let prevIndex = -1; //上一条没执行上移的数据下标
        for(let i = 0; i<multipleSelection.length; i++) {
            let index = 0;
            for(let j=0; j<list.length; j++) {
                //查找勾选的这条数据在列表里的下标
                if(multipleSelection[i] == list[j]) {
                    index = j;
                    break;
                }
            }
            //当前操作数据的上一条数据没执行上移 则当不需要上移 目的是防止下标是0，1，2，3...按顺序无空隙的数据不执行上移
            if(index - 1 != prevIndex) {
                //splice()将要上移的数据A（下标index）替换掉A的上一条数据B（下标index-1），并获得被替换的这条数据B
                // 将B设置为A原来所在的位置（下标index）
                list[index] =  list.splice(index - 1, 1, list[index])[0];
                //A,B两条数据下标发生变化，更新对象下标值
                list[index].index = index;
                list[index-1].index = index - 1;
            } else {
                //为下条数据排序作用
                prevIndex = index;
            }
        }
        return list;
    },
    /**
     * moveDown 勾选列表数据下移
     * multipleSelection 勾选的数据（已按在列表list中的下标从小到大排序）
     * list 当前操作的列表
     * */
    moveDown: moveDown(multipleSelection, list) {
        //index当前数据在规则条件列表中的下标 下移从下标最大的开始
        let prevIndex = list.length; //上一条没执行下移的数据下标
        for(let i=multipleSelection.length-1; i>=0; i--) {
            let index = list.length - 1;
            for(let j=0; j<list.length; j++) {
                //查找勾选的这条数据在列表里的下标
                if(multipleSelection[i] == list[j]) {
                    index = j;
                    break;
                }
            }
            //当前操作数据的下一条数据没执行下移 则当前操作数据不需要下移 目的是防止下标是length - 1，length - 2，length - 3...按顺序无空隙的数据不执行下移
            if(index + 1 != prevIndex) {
                //splice()将要下移的数据A（下标index）替换掉A的下一条数据B（下标index+1），并获得被替换的这条数据B
                // 将B设置为A原来所在的位置（下标index）
                list[index] =  list.splice(index + 1, 1, list[index])[0];
                //A,B两条数据下标发生变化，更新对象下标值
                list[index].index = index;
                list[index+1].index = index + 1;
            } else {
                //为下条数据排序作用
                prevIndex = index;
            }
        }
        return list;
    }

}
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

还可以使用vuedraggable（页面中直接使用table）直接拖拽移动