el-table实现拖拽功能及遇到的坑

el-table实现拖拽排序效果：

    

正在拖拽中的效果

首先我们需要引入import Sortable from "sortablejs"

const tbody = document.querySelector(

                //获取el-table中的 tbody 的dom

                ".el-table__body-wrapper tbody"

            )

            this.tableObject = Sortable.create(tbody, {

                onEnd: ({ newIndex, oldIndex }) => {

                    // 获取当前节点的数据

                    let currRow = this.tableData.splice(oldIndex, 1)[0] //this.tableData是你el-table渲染的数据 注意是你自己的数据

                    // 替换到新节点上

                    this.tableData.splice(newIndex, 0, currRow)

                    let dirSortList = this.tableData.map((v) => {

                        return v.id

                    })

                    this.liSort(dirSortList.join(",")) //this.liSort() 这个方法是我调用后端的接口 传当前排序好的id 此处换为你们自己的方法

                },

            })

以上就是我们实现拖拽排序的功能

我们将此组件用到项目中如果不是同时复用，不会出现问题的 如 ：

//pub-table是我封装的一个拖拽功能的组件 命名看你们自己

               

                    ref="first"

                    :classify="classify"

                    :table-data="tableData"

                    :org-id="orgId"

                    @search="search"

                >

我们在直接引用的时候并不会出现问题，但是如果我们在el-tabs中去多次引用就会出现问题

            ref="tab"

            v-model="activeName"

            @tab-click="handleClick"

        >

           

               

                    v-if="activeName == 1"

                    ref="first"

                    :classify="classify"

                    :table-data="tableData"

                    :org-id="orgId"

                    @search="search"

                >

           

           

               

                    ref="second"

                    :classify="classify"

                    :org-id="orgId"

                    :table-data="tableData"

                    @search="search"

                >

           

       

这是我们发现我们在el-tabs中引入了两次排序组件 我们在使用的时候只有第一次引入的那个拖拽排序组件才可以使用

（具体原因还不清楚，盲猜应该和dom的加载有关系）

解决方案：

我们在每个组件上加一个 v-if 这样的话每次切换tabs的时候 组件都会重新加载 如：

     

                    v-if="activeName == 1" // active为tabs绑定的data值 切换tabs的时候会绑定到 activeName上 会获取name值

                    ref="second"

                    :classify="classify"

                    :org-id="orgId"

                    :table-data="tableData"

                    @search="search"

                >

           

这样一个完整的拖拽排序就完成了