Vue Element Table 实现鼠标拖拽排序基于 SortableJS

home 编辑时间 2023/12/08

## 前言
我个人比较喜欢不用脚手架搓前端代码
发现网上类似的文章比较少
特意记录一下Vue ElementUI 中的 Table组件，如何实现拖拽改变排序，基于SortableJS
防止以后忘记可以回来看看

## 折腾

没时间解释了
直接上源码吧

在线演示地址
[https://zzzmhcn.gitee.io/sortable-jsdemo/](https://zzzmhcn.gitee.io/sortable-jsdemo/)

线上开源地址
[https://gitee.com/zzzmhcn/sortable-jsdemo](https://gitee.com/zzzmhcn/sortable-jsdemo)

完整代码如下
```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Vue Element SortableJS 拖拽排序 DEMO</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.14/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-table :data="tableData" border row-key="id">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="sort"
                label="序号">
        </el-table-column>
    </el-table>
    <div>
        数据实时参考：
        <pre><code>{{tableData}}</code></pre>
    </div>
</div>
<script src="https://cdn.staticfile.org/vue/2.7.9/vue.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.14/index.js"></script>

<script src="https://cdn.staticfile.org/Sortable/1.15.1/Sortable.js"></script>
<script>
    /**
     * 参考
     * https://www.cnblogs.com/xiaozhaoboke/p/16377566.html
     * https://element.eleme.cn/#/zh-CN/component/table
     */
    const vm = new Vue({
        el: '#app',
        data: () => ({
            /**
             * element项目 和王小虎杠上了 ￣^￣゜汗
             * 我这里sort的特地都给0
             * 证明原本的sort准不准都不影响程序
             */
            tableData: [
                {
                    id: '1',
                    date: '2016-05-02',
                    name: '王小虎1',
                    address: '上海市普陀区金沙江路 100 弄',
                    sort: 0
                },
                {
                    id: '2',
                    date: '2016-05-04',
                    name: '王小虎2',
                    address: '上海市普陀区金沙江路 200 弄',
                    sort: 0
                },
                {
                    id: '3',
                    date: '2016-05-01',
                    name: '王小虎3',
                    address: '上海市普陀区金沙江路 300 弄',
                    sort: 0
                },
                {
                    id: '4',
                    date: '2016-05-03',
                    name: '王小虎4',
                    address: '上海市普陀区金沙江路 400 弄',
                    sort: 0
                }
            ]
        }),
        methods: {
            // 初始化 行拖拽
            rowDrop() {
                const tbody = document.querySelector('.el-table__body-wrapper tbody')
                const _this = this
                Sortable.create(tbody, {
                    /**
                     * 拖拽鼠标释放事件 可以获得新旧序号
                     */
                    onEnd({newIndex, oldIndex}) {
                        // 根据序号调换顺序方法
                        _this.tableData.splice(newIndex, 0, _this.tableData.splice(oldIndex, 1)[0])
                        // 重新排序赋值sort
                        _this.initSort()
                    }
                })
            },
            initSort() {
                // sort 等于序号
                this.tableData.forEach((item, index) => {
                    item.sort = index
                });
            }
        },
        mounted() {
            this.initSort();
            this.rowDrop();
        },
    })
</script>
</body>
</html>
```

## END

送人玫瑰,手留余香