Cascader级联选择器的优化（高度优化+选择任意级优化）

elementui版本：2.15.5

1.解决高度问题

在引入cascader级联选择器后，会导致整个级联选择器高度占满页面的情况，我们只需在全局样式中加上如下代码固定下高度即可

/*解决高度太高的问题*/
.el-scrollbar__wrap {
  height: 300px;
}

2.如果想使选择器能够选择任意一级的选项，则需要进行如下操作：

•  首先在级联选择器的配置项中添加如下一行代码，使其能够选择任意一项

checkStrictly: true

此时添加完后却又出现了另一个问题：选择器中每一项中都带有一个圆形按钮，而且只有点击圆形按钮才能实现选中，体验极差

• 此时我们在全局样式中来去除对应圆形按钮

.el-radio__inner {
  border-radius: 0;
  border: 0;
  width: 170px;
  height: 34px;
  background-color: transparent;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
  top: -18px;
  left: -19px;
}

.el-radio__input.is-checked .el-radio__inner {
  background: transparent;
}

 应用完样式后又发现选择器在选择完选项后不会自动隐藏了（必须手动点击空白处）

• 添加一个侦听器，选择项一发生改变就关闭它

   // 选择项发生变化就关闭它
    watch: {
      selectedKeys() {
        if (this.$refs.cascaderRef) {
          this.$refs.cascaderRef.dropDownVisible = false
        }
      }
    }

  selectedKeys：级联选择器v-model绑定的值，是一个数组，里面存的是选择项的id

  cascaderRef：级联选择器绑定的ref属性

  DropDownVisible ：属性指定或检索一个值，该值指示下拉列表是否可见（true：可见，false：不可见）

 此时则实现了：1.选择器可选择任意一项        2.在选择任意一项时，下拉列表都会隐藏