实现el-cascader 同一子级单选 不同子级多选,隐藏父级复选框

实现el-cascader 同一子级单选 不同子级多选,隐藏父级复选框

  <el-cascader class='cascader hide' v-model="preValue" :options='companylist' :props='props' clearable
            popper-class="disableFirstLevel" @change='handleChange' ref='cascade' style="width:50%"></el-cascader>

data

preValue: [],    
props: { multiple: true, expandTrigger: 'click' },
companylist:[{value:1,label:1,children:[{value:11,label:11},  {value:12,label:12}]]

methods

   handleChange(val) {
      if (this.preValue.length > 0 && val.length > this.preValue.length) {
        let newIndex;
        let i = 0, j = 0;
        while (i < val.length && j < this.preValue.length) {
          if (val[i][0] === this.preValue[j][0] && val[i][1] === this.preValue[j][1]) {
            i++;
            j++;
          } else {
            //添加在中间的情况
            newIndex = i;
            break;
          }
        }
        //添加在末尾的情况
        if (j === this.preValue.length) {
          newIndex = i;
        }

        let delIndex = val.findIndex((item, index) => index !== newIndex && item[0] === val[newIndex][0]);
        if (delIndex >= 0) {
          // 取消选择的节点
          let cancelIndex;
          for (let i = 0; i < this.companylist.length; i++) {
            if (this.companylist[i].value === val[delIndex][0]) {
              for (let j = 0; j < this.companylist[i].children.length; j++) {
                if (this.companylist[i].children[j].value === val[delIndex][1]) {
                  cancelIndex = j;
                  break;
                }
              }
              break;
            }
          }
          this.$nextTick(() => {
            let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id;
            let liId = document.getElementById(panelId + '-' + cancelIndex);
            liId.children[0].click();
          })
          val[delIndex] = '';
          val = val.filter(item => item !== '');
        }
      }
      this.preValue = val;
      console.log(this.preValue);
    },

style

.disableFirstLevel {
  .el-cascader-menu:first-of-type {
    .el-cascader-node {
      .el-checkbox {
        display: none;
      }
    }
  }
}

注: 需要什么数据格式可以自行对 this.preValue进行处理 但是双向绑定el-cascader接受的是一个数组 如: [ 1 , 11 ]