vue-element中下拉框el-tree父类后面标注出子类的个数

先放一个样例图：

 写一个简单的el-select选择框包el-tree标签：

node-click的方法：

handleNodeClick(node) {
    this.$set(this.modelform, "orgId", node.id);
    this.$set(this.modelform, "orgName", node.label);
    if (!node.children || node.children.length == 0) {
        this.$refs.selectPost.blur();
    }
},

el-tree父类后面标注出子类的个数只需要在el-tree标签中加入 :render-content="renderContent"。

完整el-tree的代码：

renderContent的方法：

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
            
                {node.label+'（'+data.children.length+'）'}
            
        );
    }else{
        return (
            
                {node.label}
            
        );
    }
},

参考：https://segmentfault.com/q/1010000038483515?utm_source=tag-newest