element tree 树形控件

组件： Element（地址：http://element.eleme.io/#/zh-CN/component/tree）：Tree树形控件

<el-tree ref="expandMenuList" class="expand-tree"
         :data="setTree"
         highlight-current
         :props="defaultProps"
         :expand-on-click-node="false"
         :render-content="renderContent"
         @node-click="handleNodeClick">
</el-tree>

renderContent：内容渲染     props：数据配置     node-click:节点被点击时的回调

1）请求方式：Vue-resource

export const list = flag=> {

return http.post(`/Search/list`, flag).then(res => res.data)

}

2）通过后台接口获取数据

getDataList(){

this.loading = true; //element loading加载

list({



}).then(res => {

this.loading = false;

if (res.status) {

this.setTree= res.data

}

else {

this.$alert(res.message, "错误", {

confirmButtonText: "确定"

});

}

});

}

//　3）返回数据：parentId等于0的是父级，id等于parentId的是子级


[

{

"id":13,

"parentId":0,

"order":1,

"name":"truck",

},

{

"id":16,

"pluginId":null,

"parentId":0,

"order":1,

"name":"sca",

},

{

"id":17,

"pluginId":6,

"parentId":16,

"order":1,

"name":"abcf",

}

]

//4）转换为json树形结构  （方法放在methods里面）

methods: {

getListData() {

let dataArray = [];

this.datas.forEach(function (data) {

if(data.enabled==true){

let parentId = data.parentId;

if (parentId == 0) {

let objTemp = {

id: data.id,

name: data.name,

order: data.order,

parentId: parentId,

}

dataArray.push(objTemp);

}

}

})

this.data2treeDG(this.datas, dataArray)

}，

data2treeDG(datas, dataArray) {

for (let j = 0; j < dataArray.length; j++) {

let dataArrayIndex = dataArray[j];

let childrenArray = [];

let Id = dataArrayIndex.id;

for (let i = 0; i < datas.length; i++) {

let data = datas[i];

if(data.enabled==true){

let parentId = data.parentId;

if (parentId == Id) {//判断是否为儿子节点

let objTemp = {

id: data.id,

name: data.name,

order: data.order,

parentId: parentId,

}

childrenArray.push(objTemp);

}

}

}

dataArrayIndex.children = childrenArray;

if (childrenArray.length > 0) {//有儿子节点则递归

this.data2treeDG(datas, childrenArray)

}

}

this.setTree = dataArray;

return dataArray;

},

}

//5）格式化后的树形结构数据（setTree）：

[

{



"id":44,

"name":"扫描w2",

"order":1,

"parentId":0,

"children":[

{



"id":125,

"name":"plplupluppluplplupl",

"order":2,

"parentId":44,

"children":[

"id":44,

"name":"plplupluppluplplupl",

"order":2,

"parentId":44

]

},

{

"id":124,

"name":"pluginplugin",

"order":2,

"parentId":44,

"children":[



]

}

]

}

]

　//6）渲染


methods: {

showOrEdit(data) {

debugger;

if (this.isEdit) {

return <input type="text" style="width:80px" value={data.Name} on-blur={ev => this.edit_sure(ev, data)}/>

}

else{

return <span>{data.Name}</span>

}

},

renderContent(h, {node, data, store}) {

if(data.enabled==true&&data.parentId==0){

return (

<span>

<span>

{ this.showOrEdit(data) }

</span>

<span style="margin-left: 15px;">

<i class="el-icon-plus" on-click={ () => this.NodeAdd(node, data) }></i>

</span>

</span>)

}

else if(data.enabled==true&&data.parentId!=0){

return (

<span>

<span>

{ this.showOrEdit(data) }

</span>

</span>)

}

else {

return (

<span>

<span style="color: red;">

{ this.showOrEdit(data) }

</span>

</span>)

}

}

}

}