el-tree显示多选框和提示框

html代码

<el-tree
	 ref="treeTree"
	 :data ="treeData"
	 node-key ="id"
	 draggable
	 check-strictly
	 show-checkbox
	 @check="handleCheckChange"
	  :render-content="renderContent"
>

js代码

handleCheckChange (data, checked) {
      // data // 当前选中节点的信息
      // checked // 所有选中节点组成的信息集合
      if (checked.checkedKeys.length > this.max) {
        this.$message.warning('最多可选' + this.max + '个')
        this.$refs.tree.setChecked(data, false, false)  //设置节点的选中状态
      } else {
        this.checkedData = checked.checkedNodes
        this.checkIdArr = checked.checkedKeys
        this.$refs.tree.setCheckedKeys(checked.checkedKeys)
     }
},

renderContent (h, { node, data, store }) {
      return (
        <span class="icon-span">
          <el-tooltip class="item" effect="light" placement="right">
            <div slot="content">
              <div>{node.label}</div>
              <div>
                <span>描述:</span>
                <span>{data.desc}</span>
              </div>
            </div>
            <span class="rotate"><i class={data.icon}></i></span>
          </el-tooltip>
        </span>
      )
    }

css代码

.el-tree-node__expand-icon.is-leaf {
    display: none
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  [class*="el-icon-more"], [class^=el-icon-more] {
    transform: rotate(90deg);  //显示更多的icon旋转
  }
  .el-tree-node {
    white-space: pre-wrap;
    text-align: justify;
    margin: px2rem(5) 0
  }
  .el-tree {
    overflow: hidden;
    // 不可全选样式
    .el-tree-node {
      .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner {
        display: none;
      }
    }
  }

注意：
问题：当需要显示checkbox时，会出现当子节点全部都勾选时，父节点会自动勾选，这会使勾选的数据自动增多。
解决：
在tree中加入check-strictly属性
问题：使有子节点的父节点隐藏多选框
解决：
使用css将其隐藏

el-tree {
    overflow: hidden;
    // 不可全选样式
    .el-tree-node {
      .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner {
        display: none;
      }
    }
 }

问题：
如果需要实时根据勾选状态显示不同的数据时，建议使用check方法，而不用check-change。
因为check-change是当勾选状态发生变化时就会执行，所以不管选中还是取消选中都会执行回调函数；
而check可以在选中时新增数据，取消选中时自动删除数据。