Sobird

Element UI提供了Cascader 级联选择器的组件，使用它我们可以非常方便的创建类似省/市/县级联选择的交互UI，同时也提供了选择任意一级选项配置，该功能可让父子节点取消关联，选择任意一级选项。但是改功能默认存在两个问题：

• 鼠标点击文本无法选中，必须点击相应的单选radio/和多选checkbox才能选中
• 单选的情况下，鼠标书中后不能自动隐藏下拉菜单

下面针对上述两个小问题完成代码的改进：

<template>
  <el-row>
    <el-col :span="8">
      <span class="demonstration">单选选择任意一级选项</span>
      <el-cascader
        ref="singleCascader"
        :options="options"
        :props="{ checkStrictly: true }"
        clearable
        @change="handleChange"
      ></el-cascader>
    </el-col>
    <el-col :span="8">
      <span class="demonstration">多选选择任意一级选项</span>
      <el-cascader
        ref="multipleCascader"
        :options="options"
        :props="{ multiple: true, checkStrictly: true, expandTrigger: 'hover' }"
        clearable
        @change="handleChange"
      ></el-cascader>
    </el-col>
  </el-row>
</template>


<script>
export default {
  data() {
    return {
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则"
            },
            {
              value: "daohang",
              label: "导航"
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(newVal) {
      // 单选选中时隐藏下拉菜单
      this.$refs.singleCascader.dropDownVisible = false;
    }
  }
};
</script>

<style lang="scss">
.el-cascader-menu {
  .el-radio,
  .el-checkbox {
    display: table;
    vertical-align: middle;
    width: 90%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    margin-left: -20px;
    padding-left: 10px;
  }
  // 隐藏掉单选的radio和多选的checkbox
  .el-radio__inner,
  .el-checkbox__inner {
    display: none;
  }
}
</style>