（vue3+elementplus）拖拽可展开行的el-table

（vue3+elementplus）拖拽可展开行的el-table

因为不确定哪行是展开的 什么情况下拖拽 可给我难坏了 用正常的sortable写 一直在报错 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'hasChildren') 就是因为展开的内容也算一行 可以在dom里查看 点击展开 eltable 就会多一个tr 这就导致 拖拽前后的角标对应不上

解决办法（全部代码）

<template>
    <div> 
        <el-table :data="tableData" style="width: 100%" stripe row-key="id">
            <el-table-column width="100">
                <template #default>
                    <div class="move-icon">
                        <el-button color="forestgreen" size="small">移动</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column   type="expand">
                <template #default>
                    <div class="moon">
                        <el-icon><MoonNight /></el-icon>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="num"  >
                <template #default="scope">
                    <div>
                        <div>{{ scope.row.num }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="Name" >
                <template #default="scope">
                    <div>{{ scope.row.name }}</div>
                </template>
            </el-table-column>
            <el-table-column label="id" >
                <template #default="scope">
                    <div>{{ scope.row.id}}</div>
                </template>
            </el-table-column>
            <el-table-column label="Operations">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button>
                    <el-button  size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { Timer,MoonNight } from '@element-plus/icons-vue'
import { Sortable} from 'sortablejs'
export default defineComponent({
    name: 'sevenTwo',
    components:{
        Timer,MoonNight
    },
    setup() {
        interface User {
            date: string
            name: string
            id: number
        }
        const handleEdit = (index: number, row: User) => {
            console.log(index, row)
        }
        const handleDelete = (index: number, row: User) => {
            console.log(index, row)
        }
        const tableData = ref([
            {
                date: '2016-05-03',
                name: 'Tom1',
                id:1,
                num:1,
                
            },
            {
                date: '2016-05-02',
                name: 'Tom3',
                id:2,
                num:2,
            },
            {
                date: '2016-05-04',
                name: 'Tom4',
                id:3,
                num:3,
            },
            {
                date: '2016-05-01',
                name: 'Tom6',
                id:4,
                num:4,
            },
        ])
        // 表格行拖拽
        const rowDrop = () => {
            let tbody:any = document.querySelector(".el-table__body-wrapper tbody");
            Sortable.create(tbody, {
                handle:'.move-icon',
                animation: 150,
                draggable: '.el-table__row', //重点就是这里，指定拖拽的元素，把内容也算在行内
                onEnd(evt: any) {
                    if (evt.oldDraggableIndex !== evt.newDraggableIndex) {
                        let currRow = tableData.value.splice(evt.oldDraggableIndex, 1)[0];
                        tableData.value.splice(evt.newDraggableIndex, 0, currRow);
                    }
                },
            });
        };
        onMounted(()=>{
            rowDrop()
        })

        return {
            tableData,handleDelete,handleEdit,Timer,MoonNight,
        }
    }
})
</script>

<style scoped lang="less">
.moon{
    margin: 10px;
}
</style>

重点就是 draggable: '.el-table__row', 这句话 把内容也算进要展开的行里 无敌

可以看看sortable的官网 这里是链接https://www.itxst.com/sortablejs/neuinffi.html
还有我这个的源码可以参考下 这里还是链接 https://gitee.com/sydsdz/vue3_element-plus_ts

最后
今天是我大哥的生日 在此祝他生日快乐 然后发财
奥对 他不让我叫他大哥 也不让叫别的 没有称呼 只能叫喂了 但你应该会说 你不叫喂
总之 楚雨荨！ 生日快乐！