vue 基于elementUI、sortablejs的表格拖拽排序

 

安装 sortablejs 

npm install sortablejs

template

    <el-table
        row-key="id"
        :data="moduleContent"
        style="width: 100%"
        size="medium"
    >
        <el-table-column>
            <p class="handle" style="text-align: center; cursor: move">
                &#xe7a1;  <!-- iconfont的字体图标  -->
            </p>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="180">
        </el-table-column>
        <el-table-column prop="date" label="时间"> </el-table-column>
        <el-table-column prop="digest" label="摘要"> </el-table-column>
    </el-table>

引入sortablejs

import Sortable from "sortablejs";

data

            moduleContent: [
                {
                    id: "1",
                    title: "标题1",
                    type: "图文",
                    cover: "封面1",
                    date: "2019-12-12 12:12:12",
                    digest: "这是一段摘要内容1",
                },
                {
                    id: "2",
                    title: "标题2",
                    type: "视频",
                    cover: "封面2",
                    date: "2019-12-12 12:12:12",
                    digest: "这是一段摘要内容2",
                },
                {
                    id: "3",
                    title: "标题3",
                    type: "图文3",
                    cover: "封面3",
                    date: "2019-12-12 12:12:12",
                    digest: "这是一段摘要内容3",
                },
            ],

mounted

    mounted() {
        // 表格拖拽事件的添加
        const el = document.querySelectorAll(
            ".el-table__body-wrapper > table > tbody"  // 这个名字是elementUI生成的类名
        )[0];
        let _this = this;
        Sortable.create(el, {
            handle: ".handle", // 只能拖动这个类名的标签
            animation: 150, // 动画时长
            // 拖拽结束后的操作
            onEnd({ newIndex, oldIndex }) {
                // 交换数组中两条数据的位置
                const targetRow = _this.moduleContent.splice(oldIndex, 1)[0];
                _this.moduleContent.splice(newIndex, 0, targetRow);
            },
        });
    }

最终效果

表格拖拽