问答

el-tree怎样在每个父节点中统计出子节点的数量?

作者:admin 2021-05-12 我要评论

el-tree :data="treeData" :props="defaultProps" node-key="id" v-model="pointRadio" ref="treeForm" :filter-node-method="filterNode" :check-strictly="tru...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image

        <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>
                );
            }
        },

问题解决啦

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • el-tree怎样在每个父节点中统计出子节

    el-tree怎样在每个父节点中统计出子节

  • js调用window.print()打印页面的时候

    js调用window.print()打印页面的时候

  • 文件夹多个node_modules查找问题

    文件夹多个node_modules查找问题

  • 以下这段 代码的怎么理解?来自vue-ele

    以下这段 代码的怎么理解?来自vue-ele

腾讯云代理商
海外云服务器