<div class="tree_pre">
<el-input
placeholder="输入关键词进行过滤"
style="padding:10px 0px;width:90%"
v-model="filterText"
suffix-icon="el-icon-s-unfold"
></el-input>
<el-tree
:data="list"
:props="defaultProps"
accordion
:default-expanded-keys="default_data"
:highlight-current="true"
@node-click="handleNodeClick"
:filter-node-method="filterNode"
class="AAA"
ref="tree"
>
<span class="el-tree-node__label" slot-scope="{ node, data }">
<span>
<i
class="iconfont"
style="color:#409eff"
:class="{iconzuzhi:data.lev == 1,icondiqu:data.lev == 2,iconhome:data.lev!=1&&data.lev!=2}"
></i>
{{ node.label }}
</span>
</span>
</el-tree>
</div>
view() {
this.$axios({
method: "post",
url: "/admin/region/get_left",
params: {}
})
.then(res => {
this.list = res.data.data;
this.getChildNodes(this.list);
// this.handleNodeClick(this.list[0])
})
.catch(err => {});
},
getChildNodes: function(node) {
console.log(node)
for (var i = 0; i < node.length; i++) {
node[i]["lev"] = this.num;
}
this.num++;
for (var i = 0; i < node.length; i++) {
if (node[i]["lev"] == 2) {
this.num = 3;
} else if (node[i]["lev"] == 1) {
this.num = 2;
} else if (node[i]["lev"] == 3) {
this.num = 4;
} else if (node[i]["lev"] == 4) {
this.num = 5;
} else if (node[i]["lev"] == 5) {
this.num = 6;
} else if (node[i]["lev"] == 6) {
this.num = 7;
} else if (node[i]["lev"] == 7) {
this.num = 8;
} else if (node[i]["lev"] == 8) {
this.num = 9;
} else if (node[i]["lev"] == 9) {
this.num = 10;
}
if (node[i]["child"] != null) {
node[i]["child"] = this.getChildNodes(node[i]["child"]);
}
}
return node;
},
index.html页面上
<link rel="stylesheet" href="//at.alicdn.com/t/font_1572869_lcgpc0w3478.css">
element树状图添加自定义图标
最新推荐文章于 2024-01-29 16:02:23 发布