element+vue对el-tree树形控件多选个数限制，树形控件实现lable样式自定义，取消或者展示某个节点的展开符号（左边小箭头）

1、element+vue对el-tree树形控件多选个数限制

<el-tree ref="tree"  :props="props" :load="loadNode" lazy
          :filter-node-method="filterNode" :show-checkbox="checkbox" :check-strictly="ClickNode"  @check="handleTreeCheck" 
          node-key="id" @node-click="handleClick">
        </el-tree>

想要限制多选个数，一定要设置node-key

:show-checkbox="checkbox" 这个表示多选框。 :check-strictly="ClickNode"这个表示是否父子控件之间不关联。

// 选择个数判断
    handleTreeCheck(currNode, checkedInfo) {

      let checkedKeys = checkedInfo.checkedKeys || []; //id
      let checkedNodes = checkedInfo.checkedNodes //节点信息
      let treeNodesMap = this.$refs.tree.store?.nodesMap || {};
      let index = checkedKeys.findIndex(id => id === currNode.id)
      let status = checkedKeys.length > 5
      if (status) {
        this.$message.warning('最多只能选择5个！')
        checkedKeys.splice(index, 1)
        //设置选中的个数
        this.$refs.tree.setCheckedKeys(checkedKeys)

        Object.keys(treeNodesMap).forEach(key => {
          let item = treeNodesMap[key] || {};
          if (!checkedKeys.includes(key)) {
            let data = item.data || {};
            data.disabled = status;
            //设置其他的展开点击为不可选取
            this.$refs.tree.setCurrentNode(data);
          }
        })
      }

    },

上面就是基本的实现方式，使用了两个自带的方法，都可以用来做个数限制。但是setCheckedKeys点击个数固定后，新展开会有问题，所以加上setCurrentNode做新的懒加载数据的限制。

2、树形控件实现lable样式自定义

首先需要在 tree控件上加上 :render-content="RenderContent"

 下面是用于修改某个节点的颜色或者样式。参数有三个，可以官网查看，或者自行百度单独的RenderContent使用

   //用于编写颜色，参数括号内为三个，可以查看文档
    RenderContent(h, { node }) {
      if (this.QYArrayList.includes(node.data.id)) {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between;padding-right: 8px;">
            <span>
              <span class="el-tree-node__label" style="color:red">{node.label}</span>
            </span>
          </span>
        )
      } else {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
            <span>
              <span class="el-tree-node__label" >{node.label}</span>
            </span>
          </span>
        )
      }
    },

3、取消或者展示某个节点的展开符号（左边小箭头）

效果图：

 当在某个层级或者某个条件取消其展开符号 知需要再props内，设置isLeaf的条件

  props: {
        label: 'label',
        children: 'children',
        isLeaf:  (data, node) => {
                    if(node.data && node.data.xzjb === 0) {
                        return true
                    }else{
                      return 'leaf'
                    }
                },
      },