<el-tree
:data="treeData"
:props="defaultProps"
node-key="id"
v-model="pointRadio"
ref="treeForm"
:filter-node-method="filterNode"
:check-strictly="true"
@node-click="nodeClick"
:render-content="renderContent"
>
</el-tree>
computed: {
pointRadio: {
set(val) {
this.$emit('update:point-idx', this.pointsList.findIndex(item => item.id === +val));
},
get() {
this.pointsList.forEach((item,index) => {
item.label = item.addr;
let obj = this.treeData.findIndex(data => data.label && data.label === item.deptname);
if(obj !== -1){
this.treeData[obj].children.push(item);
}else{
let newData = {
id: String(this.treeData.length),
children: [{...item}],
label: item.deptname,
pointIdx: item.id
};
this.treeData.push(newData);
}
});
}
},
},
###<el-tree :render-content="renderContent"></el-tree>
renderContent(h, { node, data, store }){//每个父节点统计子节点数量方法
if(data.children){
return (
// render-content采用jsx语法,需安装依赖转换js语法,
//依赖1:npm install babel-plugin-transform-vue-jsx,
//依赖2:npm install babel-helper-vue-jsx-merge-props,
//依赖3:npm install babel-plugin-syntax-jsx
<span class="custom-tree-node">
<span>{node.label+'('+data.children.length+')'}</span>
</span>
);
}else{
return (
<span class="custom-tree-node">
<span>{node.label}</span>
</span>
);
}
},
问题解决啦