element ui el-tree 限制最多选择几条实现，并且需要严格的遵循父子互相关联原则

需求1：最多选择5条

需求2：勾选父节点，联动勾选父节点下子节点

需求3：勾选父节点后超过5条，舍去多出的数据

Html

<el-tree
          :data="data"
          default-expand-all
          show-checkbox
          highlight-current
          node-key="id"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :default-checked-keys="checkList"
          @check="handleCheck"
          ref="tree">

点击复选框JS代码

handleCheck(node, checked){
        let checkedNodes = this.$refs.tree.getCheckedNodes(true,false).map(child =>{
          if(!child.disabled) return child.id
        });
        let level = countChildrenLevels(node)
        let list = []
        let parent = []

        // 判断点的是不是最低层级，0是最低层级
        if (level > 0 ){
          getLeafChildren(node.children,list) //获取最低层级数组
          getLeafParent(node,parent) // 获取有子集数组

          let keysToCheck = []  // 获取点击最底层的数据
          list.forEach(child =>{
            if(!child.disabled) {
              keysToCheck.push(child.id)
            }
          })

          // 未做任何选择点击
          if (checked.checkedKeys.length == 0 || ( this.checkList.length - this.addFinders.length ) >= 30){
            let result = removeValues( this.checkList, keysToCheck);
            this.$refs.tree.setCheckedKeys(result)
            this.checkList = result
          }else{
            if (containsAll(checked.checkedKeys, keysToCheck)){
              if (checkedNodes.length > 30) {
                if ((keysToCheck.length + this.checkList.length - this.addFinders.length) > 30) keysToCheck.splice(30 - (this.checkList.length - this.addFinders.length), keysToCheck.length - (30 - this.checkList.length + this.addFinders.length))
              }
              let checks = [...keysToCheck,...this.checkList]
              this.$refs.tree.setCheckedKeys(checks)
              this.checkList = checks
            }else{
              let result = removeValues( this.checkList, keysToCheck);
              this.$refs.tree.setCheckedKeys(result)
              this.checkList = result
            }

          }
        }else{
          let parentToCheck = parent.map(child =>{
            return child.id
          })
          // 大于30条时操作
          if (checkedNodes.length > 30){
            let checkedKeys = removeValues( checked.checkedKeys , parentToCheck)
            let result = removeValues( checkedKeys , [node.id]);
            this.$refs.tree.setCheckedKeys(result)
            this.checkList = result
          }else{
            // 小于30条时操作
            let checkedKeys = removeValues( checked.checkedKeys , parentToCheck)
            this.$refs.tree.setCheckedKeys(checkedKeys)
            this.checkList = checkedKeys
          }
        }

        // this.checkList = this.checkList.concat(this.addFinders)

      },

引用JS代码

// 判断数组arr1数据是否全包含arr2内的数据
function containsAll(arr1, arr2) {
    for (let i = 0; i < arr2.length; i++) {
      if (!arr1.includes(arr2[i])) {
        return false;
      }
    }
    return true;
  }


// 移除arr1内包含arr2内的数据
  function removeValues(arr1, arr2) {
    return arr1.filter(item => !arr2.includes(item));
  }

// 判断层级
  function countChildrenLevels(obj) {
    if (!obj.children || obj.children.length === 0) {
      return 0;
    }
    return (1 + Math.max.apply(null, obj.children.map(countChildrenLevels)));
  }

//获取最底层数据
  function getLeafChildren(data,list){
    data.forEach((item) => {
      if (item.children && item.children.length > 0) {
        getLeafChildren(item.children, list);
      } else {
        list.push(item);
      }
    });
    return list;
  }
// 获取有children的parent数据
  function getLeafParent(data,list){
    if (data.children && data.children.length > 0) {
      list.push(data);
      data.children.forEach((item) => {
        getLeafParent(item, list);
      });
    }
    return list;
  }

页面效果展示