在vue里用sortablejs实现element表格列表的行排序？

<template >
    <el-table
        row-key="name"
        :data="tableData"
        stripe style="width:100%;">
        <el-table-column prop="name" label="测试"></el-table-column>
    </el-table>
</template>
<script>
import Sortable from 'sortablejs'
export default {
    data() {
        return {
            tableData: [
                {
                    name: '凯小默222'
                },
                {
                    name: '凯小默333'
                },
                {
                    name: '凯小默444'
                },
                {
                    name: '凯小默555'
                },
                {
                    name: '凯小默666'
                }
            ]
        }
    },
    mounted() {
        //使每次都可以拖拽
        this.$nextTick(()=>{
            setTimeout(()=>{
                this.rowDrop();
            },100)
        })
    },
    methods: {
        //行拖拽
        rowDrop() {
            const tbody = document.querySelector('.el-table__body-wrapper tbody')
            Sortable.create(tbody, {
                onEnd:({ newIndex, oldIndex })=> {
                    const currRow = this.tableData.splice(oldIndex, 1)[0];
                    this.tableData.splice(newIndex, 0, currRow);
                    console.log(this.tableData);
                }
            })
        },
    }
}
</script>