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":