element+vue table上移+下移 拖拽

//安装
npm install sortablejs --save
1
2

  <el-table :data="statisticsChexkboxs" border max-height="300px" width="740px" row-key="id"
                    ref="projectTable">
                    <el-table-column v-for="item in confirmHead" :key="item.label" :label="item.label" :prop="item.prop"
                        :width="item.width" align="center" show-overflow-tooltip>
                    <el-table-column label="操作" fixed="right" width="200" align="center">
                        <template slot-scope="scope">
                            <el-link type="info" icon="el-icon-top" style="margin-right: 8px" :underline="false"
                                @click="handleUp(scope.row, scope.$index)">上移
                                <el-divider direction="vertical"></el-divider>
                            </el-link>
                            <el-link type="info" icon="el-icon-bottom" style="margin-right: 8px" :underline="false"
                                @click="handleDown(scope.row, scope.$index)">下移
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>

//在需要编写排序的页面引入sortablejs依赖
   import Sortable from 'sortablejs';
     data() {
     return {
        sortable: null,
        orderSort: false,
        data: [],
        }
     }
   methods:{
    // 上移
            handleUp(item, index) {
                this.statisticsChexkboxs.splice(index - 1, 0, item);
                this.statisticsChexkboxs.splice(index + 1, 1);
                 this.handleOrderTable(this.statisticsChexkboxs)
            },
            // 下移
            handleDown(item, index) {
                this.statisticsChexkboxs.splice(index + 2, 0, item);
                this.statisticsChexkboxs.splice(index, 1);
                 this.handleOrderTable(this.statisticsChexkboxs)
            },
            //拖拽行
            setSort() {
                this.$nextTick(() => {
                //projectTable需要上面表格ref一致
                    const el = this.$refs.projectTable.$el.querySelectorAll(
                        '.el-table__body-wrapper > table > tbody'
                    )[0];
                    this.sortable = Sortable.create(el, {
                        animation: 150,
                        setData: function (dataTransfer) {
                            dataTransfer.setData('Text', '');
                        },
                        // 监听拖拽事件结束时触发
                        onEnd: evt => {
                            // 拖动行的前一行
                            const targetRow = this.statisticsChexkboxs.splice(evt.oldIndex, 1)[0];
                            // 拖动行的后一行
                            this.statisticsChexkboxs.splice(evt.newIndex, 0, targetRow);
                           this.handleOrderTable(this.statisticsChexkboxs)
                        }
                    });
                })
            },
              //保存表格顺序
            handleOrderTable(value) {
                let vaueData = value.map((item) => {
                    return {
                        detailId: item.id,
                        shipOrder: item.shipOrder,
                    };
                });
                dxjTransportAdjustShipOrder(vaueData).then((res) => {
                    const { code, msg } = res.data
                    const title = code === 200 ? '操作成功' : '操作失败'
                    const type = code === 200 ? 'success' : 'error'
                    this.$notification(title, type, msg)
                })
            },
   }

 // 我这个是在弹筐里写的 $refs.获取不到可以写这个里  正常情况放mounted调用就行
        updated() {
            this.setSort()
        },
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