vue+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>)
}
}
}
}