antd vue tree节点显示徽标数

本例用于角色赋值权限，由于权限粒度到按钮，所以菜单没有设置父子关联，有些设置了子权限的，父级看不出来，需要在节点后边显示出来各级子菜单已设置的数量

  getSelCount(data, node, parent) {
        if (!node.count) {
          node.count = 0
          node.tmp = node.title
          node.scopedSlots = {title: 'custom'}
        }
        if (data.indexOf(node.id) >= 0) {
          if (parent) {
            parent.count++
          } else {
            node.count++
          }
        }
        let count = 0
        if (node.children && node.children.length > 0) {
          node.children.forEach(item => {
            count = this.getSelCount(data, item, node)
          })
        }
        if (parent) {
          parent.count += count
          if (parent.count > 0) {
            // parent.title = parent.tmp + '' + parent.count
          }
          return parent.count
        } else {
          if (node.count > 0) {
            // node.title = node.tmp + '' + node.count
          }
          return node.count
        }

      },

这是一个递归方法，来计算数量，使用node.scopedSlots = {title: ‘custom’} 设置节点内容自定义

    <a-row style="height:100%;">
        <a-col :span="24/appList.length" v-for="app in appList" :key="app.id" :value="app.id">
          <h4>{{app.name}}</h4>
          <a-tree
            v-model="app.checkedKeys"
            multiple
            checkable
            checkStrictly
            :auto-expand-parent="autoExpandParent"
            :expanded-keys="app.expandedKeys"
            :tree-data="app.menus"
            :selected-keys="app.selectedKeys"
            :replaceFields="replaceFields"
            @expand="(expandedKeys)=>{ app.expandedKeys = expandedKeys}"
          >
            <template slot="custom" slot-scope="{ title,count }">
              {{title}}
              <a-badge :count="count" v-if="count>0" :number-style="{
                    backgroundColor: '#fff',
                    color: '#999',
                    boxShadow: '0 0 0 1px #d9d9d9 inset',
                  }"/>
            </template>
          </a-tree>
        </a-col>
      </a-row>

用 template 设置徽标显示数量

获取到数据后计算数量

 sysRoleOwnMenu({id: record.id}).then((res) => {
          if (res.success) {
            this.appList.forEach(app => {
              app.menus.forEach(item => {
                this.getSelCount(res.data, item)
              })
            })
          }
          this.formLoading = false
        })