vue + elementUI cascader 级联 任意选

elementui 本身组件支持任意选中, 但需要选中radio 按钮才可以, 用户体验不好,所以做了优化
主要是将 radio 样式修改,层级变高, 当用户点击 label 文本时,实际点击的是 radio 亲测有效

<template>
    <div class="merchant-con">
      <el-cascader
        v-model="value"
        :options="options"
        :props="props"
        filterable
        ref="cascader"
        @change="handleChange">
      </el-cascader>
    </div>
</template>
<script>
export default {
  name: 'test',
  data () {
    return {
      value: [],
      options: [],
      props: {  // 配置数据格式 
        checkStrictly: true, // 是否严格的遵守父子节点不互相关联(官网配置项)
        value: 'categoryId',
        label: 'dispalyName',
      }
    }
  },
  methods: {
    handleChange() {
      const el = this.$refs.cascader;
      // 官方文档中有提供获取子节点的方法 getCheckedNodes; 
      // 通过监听当前的点击事件,判断是否还有子节点,如果没有,则关闭选项卡;  
      const mark = el.getCheckedNodes()[0].children.length;
      if(!mark) {
        el.dropDownVisible = false;
      }
    },
  },

   created () {
    // 本地 mock 数据 可以不用关注
    const options = [{
      categoryId: 'shejiyuanze',
      dispalyName: '设计原则',
      children: [{
          categoryId: 'yizhi',
          dispalyName: '一致'
        },{
          categoryId: 'fankui',
          dispalyName: '反馈'
        }, {
          categoryId: 'xiaolv',
          dispalyName: '效率'
        }, {
          categoryId: 'kekong',
          dispalyName: '可控',
          children: [{
            categoryId: 'test',
            dispalyName: '测试'
          }]
        }
      ]},{
        categoryId: 'daohang',
        dispalyName: '导航',
        children: [{
          categoryId: 'cexiangdaohang',
          dispalyName: '侧向导航'
        }, {
          categoryId: 'dingbudaohang',
          dispalyName: '顶部导航'
        }]
      }
    ]
    this.options = options;
  }
</script>
//  css 样式需要放在全局 否则不生效
<style >
  .el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .el-cascader-panel .el-radio__input {
    visibility: hidden;
  }
  .el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
  }
</style>

如果存在节点内容超长问题, 可以参考另一篇 文章, 亲测有效哦

参考文档1
参考文档2