vue 表格实现拖拽排序，表格展开支持可拖拽排序, 表格实现展开收起功能

1.安装插件：

npm install sortablejs --save

2.引入：

import Sortable from 'sortablejs'

3.表格结构：

<el-table :data="tableData" ref="multipleTable" class="multTable" row-key="id" @expand-change="expandChange">
    <el-table-column prop="name" label="名称"></el-table-column>
</el-table>

4.页面使用：

export default {
    data() {
        return {
            // 表格展开数据
            expandedRows: [],
        }
    },
    // 页面初始化，获取表格dom结构
    mounted() {
        this.$nextTick(() => {
            this.initSortTable()
        })
    },
    methods: {
        // 表格展开事件
        expandChange(row, expandedRows) {
            this.expandedRows = expandedRows
            // 每次点击展开的时候，只展开当前，收起之前展开的(如果项目需要同时展开多个，则去掉这个条件即可)
            if (expandedRows.length > 1) {
               this.$refs.multipleTable.toggleRowExpansion(this.expandedRows[0])
            }
        },
        // 初始化拖拽表格
        initSortTable() {
            // 获取 tbody 节点
            const elTbody = this.$refs.multipleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
            // 拖拽排序
            this.tableObject = Sortable.create(elTbody, {
                onEnd: evt => {
                    // 当表格展开时
                    if (this.expandedRows.length > 0) {
                        // 表格拖拽后，将当前展开的表格进行收起
                        this.$refs.multipleTable.toggleRowExpansion(this.expandedRows[0])
                    }
                    // 对拖拽后的表格重新进行排序（替换新拖拽的位置，之前数据上移）
                    this.tableData.splice(evt.newIndex, 0, this.tableData.splice(evt.oldIndex, 1)[0])
                    接口API(params).then((res) => {
                        this.$message.success('表格排序调整成功')
                    })
                }
            })
        },
    }
}

tips:

   1.页面初始化就需要先加载DOM结构，
   2.后面每当进行表格拖拽时，会自动触发this.initSortTable()方法，不需要额外方法。