Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.4k views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
<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>
                );
            }
        },

问题解决啦


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...