第vue+elementUI實現(xiàn)樹形表格本文實例為大家分享了vue+elementUI實現(xiàn)樹形表格的具體代碼，供大家參考，具體內(nèi)容如下

一、在component文件夾下新建如下treeTable文件夾，里面有2個文件：

eval.js:將數(shù)據(jù)轉(zhuǎn)換成樹形數(shù)據(jù)

*@Author:jianglei

*@Date:2017-10-1212:06:49

usestrict

importVuefromvue

exportdefaultfunctiontreeToArray(data,expandAll,parent=null,level=null){

lettmp=[]

Array.from(data).forEach(function(record){

if(record._expanded===undefined){

Vue.set(record,_expanded,expandAll)

let_level=1

if(level!==undefinedlevel!==null){

_level=level+1

Vue.set(record,_level,_level)

//如果有父元素

if(parent){

Vue.set(record,parent,parent)

tmp.push(record)

if(record.childrenrecord.children.length0){

constchildren=treeToArray(record.children,expandAll,record,_level)

tmp=tmp.concat(children)

returntmp

}

index.vue:樹形表格組件

template

el-table:data=formatData:row->

二、在需要的地方引入該組件

例如：在component文件夾下新建a.vue:

tree-table:data=data:columns=columnsborder/

importtreeTablefrom./TreeTable

components:{treeTable},

data(){

return{

columns:[

text:事件,

value:event,

width:200

text:ID,

value:id

text:時間線,

value:timeLine

text:備注,

value:comment

data:[

id:0,

event:事件1,

timeLine:50,

comment:無

id:1,

event:事件1,

timeLine:100,

comment:無,

children:[

id:2,

event:事件2,

timeLine:10,

comment:無

id:3,

event:事件3,

timeLine:90,

comment:無,

children:[

id:4,

event:事件4,

timeLine:5,

comment:無

id:5,

event:事件5,

timeLine:10,

comment:無

id:6,

event:事件6,

timeLine:75,

comment:無,

children:[

id:7,

event:事件7,

timeLine:50,

comment:無,

children:[

id:71,

event:事件71,

timeLine:25,

comment:xx

id:72,

event:事件72,

timeLine:5,

comment:xx

id:73,

event:事件73,

timeLine:20,

comment:xx