【前端開發】基於vue的樹形結構table拖拽排序教程
阿新 • • 發佈:2021-06-25
安裝依賴drag-tree-table(更多文件見github)
yarn add drag-tree-table
html
<dragTreeTable ref="table" :data="treeData" @drag="onTreeDataChange" onlySameLevelCanDrag resize fixed :isdraggable="true" > <template #selection="{row}"> {{ row.menuName }}</template> <template #icon="{row}"> <svg-icon :icon-class="row.icon" /> </template> <template #visible="{row}"> <div @click.stop> <el-switch @change=" val => { visiableChange(val, row) }" v-model="row.visible" active-value="0" inactive-value="1" /> </div> </template> <template #edit="{row}"> <el-button v-hasPermi="['system:menu:edit']" type="text" icon="el-icon-edit" @click.stop.prevent="handleUpdate(row)" >編輯</el-button > <el-button v-hasPermi="['system:menu:add']" type="text" icon="el-icon-plus" @click.stop.prevent="handleAdd(row)" >新增</el-button > <el-button v-hasPermi="['system:menu:remove']" class="btn-delete" type="text" icon="el-icon-delete" @click.stop.prevent="handleDelete(row)" >刪除</el-button > </template> </dragTreeTable>
js
import dragTreeTable from 'drag-tree-table' @Component({ name: 'MenuManage', components: { dragTreeTable } }) private tableIdArr: Array<string> = [] private treeData: any = { lists: [], columns: [ { type: 'selection', title: '選單名稱', field: 'menuName', width: 130, align: 'left' }, { type: 'icon', title: '圖示', field: 'icon', width: 100 }, // { // title: '排序', // field: 'orderNum', // width: 60 // }, { title: '許可權標識', field: 'perms', width: 130 }, { title: '元件路徑', field: 'component', width: 180 }, { type: 'visible', title: '可見', field: 'visible', width: 80 }, { title: '建立時間', field: 'createTime', width: 180 }, { type: 'edit', title: '操作', field: '', width: 200, align: 'center' } ] }
拖拽方法
// 樹形table拖拽排序 onTreeDataChange(list: Array<object>, curObj: any) { this.treeData.lists = list // 拖拽後的資料 this.tableIdArr = [] // const idArr = this.filterIdArrFun(JSON.parse(JSON.stringify(list)), curObj.parent_id) const putData = { parentId: curObj.parent_id, // 父目錄id ids: this.tableIdArr // 同級id }效果
// 得到父id和同級id陣列即可請求介面
} /** 遞迴獲取父級id相同物件的id陣列 **/ filterIdArrFun(data: any, parentId: string) { const firstFun = data.map((q: any) => { if (q.lists && q.lists.length > 0) { if (q.parentId == parentId) { this.tableIdArr.push(q.id) } q.lists = this.filterIdArrFun(JSON.parse(JSON.stringify(q.lists)), parentId) } else { if (q.parent_id === parentId) { this.tableIdArr.push(q.id) } } return q }) return this.tableIdArr }