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

发布于 2022-09-12 13:42:08 字数 1407 浏览 18 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

无可置疑 2022-09-19 13:42:08
<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>
                );
            }
        },

问题解决啦

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文