ElementUI级联选择器实现同一父级下最多只能选中一个子级

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

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]);

let cancelIndex;
for (let i = 0; i < this.options.length; i++) {
  if (this.options[i].value === val[delIndex][0]) {
    for (let j = 0; j < this.options[i].children.length; j++) {
      if (this.options[i].children[j].value === val[delIndex][1]) {
        cancelIndex = j;
        break;
      }
    }
    break;
  }
}

this.$nextTick(() => {
    let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id;  //其中menu[1]表示右侧的面板 menu[0]即为左侧的面板
    let liId = document.getElementById(panelId + '-' + cancelIndex);
    liId.children[0].click();
  })

<template>
  <div class='test'>
    <el-cascader
      class='cascader'
      :options='options'
      :props='props'
      clearable
      :popper-class="'hide'"
      @change='handleChange'
      ref='cascade'
    ></el-cascader>
  </div>
</template>

<script>
export default {
  name: 'Cascader',
  data() {
    return {
      props: { multiple: true, expandTrigger: 'click' },
      options: [{
        value: 1,
        label: '杭州',
        children: [{
          value: 3,
          label: '西湖'
        }, {
          value: 4,
          label: '钱塘'
        }, {
          value: 7,
          label: '上城'
        }]
      }, {
        value: 2,
        label: '成都',
        children: [{
          value: 5,
          label: '青羊'
        }, {
          value: 6,
          label: '武侯'
        }]
      }],
      preValue:[]
    }
  },
  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.options.length; i++) {
            if (this.options[i].value === val[delIndex][0]) {
              for (let j = 0; j < this.options[i].children.length; j++) {
                if (this.options[i].children[j].value === val[delIndex][1]) {
                  cancelIndex = j;
                  break;
                }
              }
              break;
            }
          }
          this.$nextTick(() => {
            let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id;  //其中menu[1]表示右侧的面板 menu[0]即为左侧的面板
            let liId = document.getElementById(panelId + '-' + cancelIndex);
            liId.children[0].click();
          })
          val[delIndex] = '';
          val = val.filter(item => item !== '');
        }
      }
      this.preValue = val;
    }
  }
};
</script>

<style lang='less'>
.test {
  text-align: center;
  margin-top: 200px;

  .title {
    display: block;
    margin-bottom: 20px;
  }

  .cascader {
    .el-input__inner {
      width: 362px;
    }

    .el-cascader__tags {
      display: flex;
      flex-wrap: nowrap;
      overflow-y: overlay;
      margin-left: 2px;
    }

    .el-cascader__tags::-webkit-scrollbar {
      width: 0;
      height: 3px;
    }

    /*定义滚动条轨道 内阴影+圆角*/

    .el-cascader__tags::-webkit-scrollbar-track {
      background-color: rgba(186, 203, 227, 0.3);
    }

    /*定义滑块 内阴影+圆角*/

    .el-cascader__tags::-webkit-scrollbar-thumb {
      background-color: #B3C2D7;
    }
  }
}

.hide {
  .el-cascader-menu:first-of-type {
    .el-cascader-node {
      .el-checkbox {
        display: none;
      }
    }
  }
}
</style>