el-table實(shí)現(xiàn)拖拽排序效果：
? ??
首先我們需要引入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 }) => {
? ? ? ? ? ? ? ? ? ? // 獲取當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? let currRow = this.tableData.splice(oldIndex, 1)[0] //this.tableData是你el-table渲染的數(shù)據(jù) 注意是你自己的數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? // 替換到新節(jié)點(diǎn)上
? ? ? ? ? ? ? ? ? ? this.tableData.splice(newIndex, 0, currRow)
? ? ? ? ? ? ? ? ? ? let dirSortList = this.tableData.map((v) => {
? ? ? ? ? ? ? ? ? ? ? ? return v.id
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? this.liSort(dirSortList.join(",")) //this.liSort() 這個(gè)方法是我調(diào)用后端的接口 傳當(dāng)前排序好的id 此處換為你們自己的方法
? ? ? ? ? ? ? ? },
? ? ? ? ? ? })
以上就是我們實(shí)現(xiàn)拖拽排序的功能
我們將此組件用到項(xiàng)目中如果不是同時(shí)復(fù)用斩箫，不會出現(xiàn)問題的 如 ：
//pub-table是我封裝的一個(gè)拖拽功能的組件 命名看你們自己
? ? ? ? ? ? ? ? <pub-table
? ? ? ? ? ? ? ? ? ? ref="first"
? ? ? ? ? ? ? ? ? ? :classify="classify"
? ? ? ? ? ? ? ? ? ? :table-data="tableData"
? ? ? ? ? ? ? ? ? ? :org-id="orgId"
? ? ? ? ? ? ? ? ? ? @search="search"
? ? ? ? ? ? ? ? ></pub-table>
我們在直接引用的時(shí)候并不會出現(xiàn)問題，但是如果我們在el-tabs中去多次引用就會出現(xiàn)問題
<el-tabs
? ? ? ? ? ? ref="tab"
? ? ? ? ? ? v-model="activeName"
? ? ? ? ? ? @tab-click="handleClick"
? ? ? ? >
? ? ? ? ? ? <el-tab-pane label="test1" name="1">
? ? ? ? ? ? ? ? <pub-table
? ? ? ? ? ? ? ? ? ? v-if="activeName == 1"
? ? ? ? ? ? ? ? ? ? ref="first"
? ? ? ? ? ? ? ? ? ? :classify="classify"
? ? ? ? ? ? ? ? ? ? :table-data="tableData"
? ? ? ? ? ? ? ? ? ? :org-id="orgId"
? ? ? ? ? ? ? ? ? ? @search="search"
? ? ? ? ? ? ? ? ></pub-table>
? ? ? ? ? ? </el-tab-pane>
? ? ? ? ? ? <el-tab-pane label="tets2" name="2">
? ? ? ? ? ? ? ? <pub-table
? ? ? ? ? ? ? ? ? ? ref="second"
? ? ? ? ? ? ? ? ? ? :classify="classify"
? ? ? ? ? ? ? ? ? ? :org-id="orgId"
? ? ? ? ? ? ? ? ? ? :table-data="tableData"
? ? ? ? ? ? ? ? ? ? @search="search"
? ? ? ? ? ? ? ? ></pub-table>
? ? ? ? ? ? </el-tab-pane>
? ? ? ? </el-tabs>
這是我們發(fā)現(xiàn)我們在el-tabs中引入了兩次排序組件 我們在使用的時(shí)候只有第一次引入的那個(gè)拖拽排序組件才可以使用
（具體原因還不清楚，盲猜應(yīng)該和dom的加載有關(guān)系）
解決方案：
我們在每個(gè)組件上加一個(gè) v-if 這樣的話每次切換tabs的時(shí)候 組件都會重新加載 如：
? ? ? <pub-table
? ? ? ? ? ? ? ? ? ? v-if="activeName == 1" // active為tabs綁定的data值 切換tabs的時(shí)候會綁定到 activeName上 會獲取name值
? ? ? ? ? ? ? ? ? ? ref="second"
? ? ? ? ? ? ? ? ? ? :classify="classify"
? ? ? ? ? ? ? ? ? ? :org-id="orgId"
? ? ? ? ? ? ? ? ? ? :table-data="tableData"
? ? ? ? ? ? ? ? ? ? @search="search"
? ? ? ? ? ? ? ? ></pub-table>
? ? ? ? ? ? </el-tab-pane>
這樣一個(gè)完整的拖拽排序就完成了
