這篇文章主要介紹怎么基于Vue實(shí)現(xiàn)可以拖拽的樹形表格，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司是一家企業(yè)級云計(jì)算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營經(jīng)驗(yàn)。主營GPU顯卡服務(wù)器，站群服務(wù)器，達(dá)州服務(wù)器托管，海外高防服務(wù)器，成都機(jī)柜租用，動(dòng)態(tài)撥號VPS，海外云手機(jī)，海外云服務(wù)器，海外服務(wù)器租用托管等。

Vue的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

因業(yè)務(wù)需求，需要一個(gè)樹形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合適的，大部分樹形表格都沒有拖拽功能，所以決定自己實(shí)現(xiàn)一個(gè)。這里分享一下實(shí)現(xiàn)過程，項(xiàng)目源代碼請看github，插件已打包封裝好，發(fā)布到npm上　

本博文會(huì)分為兩部分，第一部分為使用方式，第二部分為實(shí)現(xiàn)方式

安裝方式

npm i drag-tree-table --save-dev

使用方式

import dragTreeTable from 'drag-tree-table'

 模版寫法

data參數(shù)示例

{
 lists: [
 {
 "id":40,
 "parent_id":0,
 "order":0,
 "name":"動(dòng)物類",
 "open":true,
 "lists":[]
 },{
 "id":5,
 "parent_id":0,
 "order":1,
 "name":"昆蟲類",
 "open":true,
 "lists":[
  {
  "id":12,
  "parent_id":5,
  "open":true,
  "order":0,
  "name":"螞蟻",
  "lists":[]
  }
 ]
 },
 {
 "id":19,
 "parent_id":0,
 "order":2,
 "name":"植物類",
 "open":true,
 "lists":[]
 }
　],
 columns: [
 {
 type: 'selection',
 title: '名稱',
 field: 'name',
 width: 200,
 align: 'center',
 formatter: (item) => {
  return ''+item.name+''
 }
 },
 {
 title: '操作',
 type: 'action',
 width: 350,
 align: 'center',
 actions: [
  {
  text: '查看角色',
  onclick: this.onDetail,
  formatter: (item) => {
   return '查看角色'
  }
  },
  {
  text: '編輯',
  onclick: this.onEdit,
  formatter: (item) => {
   return '編輯'
  }
  }
 ]
 },
 ]
}

 onDrag在表格拖拽時(shí)觸發(fā)，返回新的list

onTreeDataChange(lists) {
 this.treeData.lists = lists
}

到這里組件的使用方式已經(jīng)介紹完畢

實(shí)現(xiàn)

?遞歸生成樹姓結(jié)構(gòu)（非JSX方式實(shí)現(xiàn)）
?實(shí)現(xiàn)拖拽排序（借助H5的dragable屬性）
?單元格內(nèi)容自定義展示

組件拆分-共分為四個(gè)組件

　　dragTreeTable.vue是入口組件，定義整體結(jié)構(gòu)

　　row是遞歸組件（核心組件）

　　clolmn單元格，內(nèi)容承載

　　space控制縮進(jìn)

看一下dragTreeTable的結(jié)構(gòu)

看起來分原生table很像，dragTreeTable主要定義了tree的框架，并實(shí)現(xiàn)拖拽邏輯

filter函數(shù)用來匹配當(dāng)前鼠標(biāo)懸浮在哪個(gè)行內(nèi)，并分為三部分，上中下，并對當(dāng)前匹配的行進(jìn)行高亮

resetTreeData當(dāng)drop觸發(fā)時(shí)調(diào)用，該方法會(huì)重新生成一個(gè)新的排完序的數(shù)據(jù)，然后返回父組件

下面是所有實(shí)現(xiàn)代碼

row組件核心在于遞歸，并注冊拖拽事件，v-html支持傳入函數(shù)，這樣可以實(shí)現(xiàn)自定義展示，渲染數(shù)據(jù)時(shí)需要判斷是否有子節(jié)點(diǎn)，有的畫遞歸調(diào)用本身，并傳入子節(jié)點(diǎn)數(shù)據(jù)

結(jié)構(gòu)如下

 
<blockquote id="rb7v9"><rt id="rb7v9"></rt></blockquote>
<strong id="rb7v9"><track id="rb7v9"></track></strong>