Vue drag and drop sorting (el-table ajax returns data)

<template>
    <el-table :data="list">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="url" label="链接" />
        <el-table-column prop="description" label="描述" />
    </el-table>
</template>

<script>
    export default ({
        data(){
            return{
                list:[],
            }
        },
        methods:{
            // 获取数据列表
            getlist(){
                this.list = [
                {name:'百度',url:'wwww.baidu.com',description:'baidu'},
                {name:'腾讯网',url:'wwww.qq.com',description:'tencent'},
                {name:'新浪微博',url:'https://www.weibo.com/',description:'weibo'},
                {name:'今日头条',url:'https://www.toutiao.com/',description:'bytedance'},
                {name:'哔哩哔哩',url:'https://www.bilibili.com/',description:'bilibili'}
                ]
            },
            // 行拖拽
            rowDrop() {
                const _this = this
                // 目标元素
                let target = document.querySelector('.el-table__body-wrapper tbody');
                console.log("target.childElementCount",target.childElementCount)

                for (let i = 0; i < target.childElementCount; i++) {
                    const child = target.children[i]
                    child.draggable = true
                    child.ondragstart = function(event) {
                        console.log("start111111", i);
                        event.dataTransfer.setData('index', i);
                    }
                    child.ondragover = function(event){
                        event.preventDefault()
                    }
                    child.ondrop = function(event) {
                        event.preventDefault();
                        event.stopPropagation()
                        let startIndex = parseInt(event.dataTransfer.getData('index'))
                        let currentIndex = parseInt(i)
                        console.log("start", startIndex)
                        console.log("drop", currentIndex)

                        if (startIndex - currentIndex > 0) {

                            console.log("要拖拽的元素的索引 大于 当前位置的元素的索引")
                            _this.list.splice(currentIndex, 0, _this.list[startIndex])
                            console.log("删除" + startIndex + 1)
                            _this.list.splice(startIndex + 1, 1)
                            _this.is_table_sort++

                        } else if (startIndex - currentIndex < 0) {
                            console.log("要拖拽的元素的索引  小于 当前位置的元素的索引")
                            _this.list.splice(currentIndex + 1, 0, _this.list[startIndex])
                            _this.list.splice(startIndex, 1)
                            _this.is_table_sort++
                        } else {
                            console.log("什么也不用做");
                        }
                    }
                    child.ondragend = function() {
                        console.log('child' + i + '拖拽结束');
                     //   _this.rowDrop()
                    }
                }
            },
        },
        updated(){
            //如果是通过ajax加载的数据需要用该方法
            /*
            this.$nextTick(()=>{
                this.rowDrop()
            })
            */
        },
        mounted: function () {
            //如果不是通过ajax加载的数据需要用该方法
            this.$nextTick(()=>{
                this.rowDrop()
            })

        },
        created(){
            this.getlist()

        },
    })
</script>