公司领导让我实现一个功能，一个级联的多选框那种，我已经就是简单的多选，把el-cascader的多选属性一加就好，结果还是我想的太简单了，需求并没有这么简单。

在这我们可以看到，饿了么的级联多选效果完全没有限制的那种

但是公司的要求是选项的所有父级必须一样，按上面的说，也就是只可以让用户选择

东南/上海 以下的，也就是除了树的子节点可以不一样，其余部分必须一样

我的解决思路是，选择的时候监听绑定值的变化，我在事件里处理一下，判断一下树形结构，如果用户选择的子节点与上一个子节点的父节点不一致，那我就把上一个节点给删除，相当于我把用户勾选的给取消掉

但是公司又说了，既然只能选择最后一级，那么不如直接把第一级和第二级的多选框直接删了吧，在这里，我一时想不到该怎么把这些多选框删掉，把我整的头疼的，最后还是通过问ai，给我提供了一个思路，可以通过样式来隐藏掉一二级的选框，来实现删除效果

这个是我最终实现的效果，话不多说，上代码

HTML

   <el-cascader
              v-model="eprItPackClass"
              popper-class="last-check"
              :props="{ expandTrigger: 'hover', multiple: true }"
              :options="treedata"
            />

JS

    watch: {
      eprItPackClass: {
        deep: true,
        handler(newVal, oldVal) {
          // newVal和oldVal对比，找出新增的那一项
          if (newVal.length > oldVal.length) {
            // 默认认为新增的这一项是最后新增的这一项，但是有可能是第一项
            let currentData = newVal[newVal.length - 1]
            if (
              oldVal.find((item) => {
                return (
                  currentData[0] + currentData[1] + currentData[2] ===
                  item[0] + item[1] + item[2]
                )
              })
            ) {
              // 说明不是最后一项,是第一项
              currentData = newVal[0]
            }
            if (newVal.length > 1) {
              if (
                newVal[newVal.length - 1][0] + newVal[newVal.length - 1][1] !==
                newVal[0][0] + newVal[0][1]
              ) {
                this.eprItPackClass = [currentData]
              }
            }
          }
        },
      },
    },

CSS

  .last-check {
    .el-cascader-panel .el-checkbox {
      width: 70%;
      height: 100%;
      z-index: 10;
      position: absolute;
    }
    .el-cascader-node__label {
      margin-left: 10px;
    }
    li[aria-haspopup='true'] {
      .el-checkbox {
        display: none;
      }
      .el-cascader-node__label {
        margin-left: 0px;
      }
    }
  }