vue3+ts+element使用sortablejs实现表头拖拽功能

1、下载依赖 npm install sortablejs，官网地址：Sortable.js中文网

2、下载依赖后在页面中引用，引用可能会出现引用失败，在env.d.ts中添加以下代码

declare module 'sortablejs'

3、完整代码

<template>
    <el-table :data="tableData" style="width: 100%">
        <template v-for="(item, index) in data">
            <el-table-column fixed :prop="item.prop" :label="item.label" v-if="item.isCheck" width="150">
            </el-table-column>
        </template>
 
        <el-table-column fixed="right" label="Operations" width="120">
            <template #default>
                <el-button link type="danger" @click="handleClickDig" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
 
 
    <el-dialog v-model="dialogTableVisible" title="编辑列表">
        <el-table class="form_table" :data="data" row-key="row" border>
            <el-table-column label="选中" width="120">
                <template #default="scope">
                    <el-checkbox v-model="scope.row.isCheck"></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column label="选中" width="120">
                <template #default="scope">
                    <div> {{ scope.row.label }}</div>
                </template>
            </el-table-column>
 
            <el-table-column label="拖拽" width="120">
                <template #default>
                    <el-button link type="primary" size="small" >Detail</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleBtn()">Cancel</el-button>
            </span>
        </template>
    </el-dialog>
</template>
 
<script  lang="ts"   setup>
import { reactive, ref, onMounted, nextTick, watch } from 'vue'
import { ElTable } from 'element-plus'
import Sortable from 'sortablejs'
 
const dialogTableVisible = ref(false)
 
const handleClickDig = () => {
    dialogTableVisible.value = true
    dragSort();
}
 
const handleBtn = () => {
    dialogTableVisible.value = false
    nextTick(() => {
        localStorage.setItem('data', JSON.stringify(data));
    });
    location.reload();
}
onMounted(() => {
    // return data = JSON.parse(localStorage.getItem('data') || '');
})
let data = [
    { label: "日期", prop: "date", isCheck: 'false' },
    { label: "名字", prop: "name", isCheck: 'false' },
    { label: "住址", prop: "state", isCheck: 'false' },
    { label: "年龄", prop: "city", isCheck: 'false' },
    { label: "性别", prop: "address", isCheck: 'false' },
    { label: "爱好", prop: "zip", isCheck: 'false' },
    { label: "优点", prop: "tag", isCheck: 'false' },
]
 
 
const tableData =ref([
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
])
 
// 表格行拖拽
//行拖拽
const dragSort = () => {
    nextTick(() => {
        // 首先获取需要拖拽的dom节点
        Sortable.create(document.querySelector(".form_table .el-table__body-wrapper tbody"), {
            disabled: false,
            ghostClass: 'sortable-ghost', //拖拽样式
            animation: 150, // 拖拽延时，效果更好看
            group: { // 是否开启跨表拖拽
                pull: false,
                put: false
            },
            onEnd: (evt: { newIndex: any; oldIndex: any; }) => {
                const { newIndex, oldIndex } = evt
                data.splice(
                    newIndex,
                    0,
                    data.splice(oldIndex, 1)[0]
                );
                var newArray = data.slice(0);
 
                nextTick(() => {
                    data = newArray;
                });
                console.log(data, 'data')
            },
        });
        //列拖拽
        // 首先获取需要拖拽的dom节点
        Sortable.create(document.querySelector(".form_table .el-table__header-wrapper tr"), {
            disabled: false,
            ghostClass: 'sortable-ghost', //拖拽样式
            animation: 150, // 拖拽延时，效果更好看
            group: { // 是否开启跨表拖拽
                pull: false,
                put: false
            },
            onEnd: (evt: { newIndex: any; oldIndex: any; }) => {
                const { newIndex, oldIndex } = evt
                console.log(oldIndex,'老的')
                console.log('新的',newIndex)
                data.splice(
                    newIndex,
                    0,
                    data.splice(oldIndex, 1)[0]
                );
                var newArray = data.slice(0);
 
                nextTick(() => {
                    data = newArray;
                });
                console.log(data, 'data')
            },
        });
 
    });
}

</script>

4、加上 :resizable="false"后，列拖拽取消