element ui tree 计算勾选个数

Question

怎么计算显示，子级被勾选中的个数

<el-tree :data="data"
  show-checkbox
  node-key="id"
  default-expand-all
  :expand-on-click-node="false"
  :render-content="renderContent">
</el-tree>


  renderContent(h, { node, data, store }) {
    if(data.children){
     return (
      <span class="custom-tree-node">
        <span>{node.label}</span>
        <span>
          {this.jisuan(data)}项
        </span>
      </span>);
    }else{
    return (
      <span class="custom-tree-node">
        <span>{node.label}</span>
      </span>);
    }
    

  },
  
  
  jisuan(data){
    console.log(data)
    return  data.children.length;
  },

Answer 1

文档上有对应的例子，
得到的数据你可以看看，然后计算计算就行了，没啥难度，

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  ref="tree">
</el-tree>
<div class="buttons">
  <el-button @click="getCheckedNodes">通过 node 获取</el-button>
  <el-button @click="getCheckedKeys">通过 key 获取</el-button>
</div>


getCheckedNodes() {
  console.log(this.$refs.tree.getCheckedNodes(true,true));
  //两个true分别代表  1、是否只是叶子节点，默认值为 false 2、是否包含半选节点，默认值为 false
},
getCheckedKeys() {
  console.log(this.$refs.tree.getCheckedKeys(true));
  //若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
},