elementui cacader 级联选择器 鼠标悬浮显示

实现思路: 影藏 radio 按钮, 通过 js 获取节点内容 绑定 click 时间, 实现任意选中叶子节点的效果; 如果内容超长, 添加 title 属性, 实现悬浮展示所有内容;

<template>
    <div class="cascader-con">
      <el-cascader
        v-model="value"
        :options="options"
        :props="props"
        filterable
        clearable
        ref="cascader"
        :append-to-baody="false"
        @visible-change="onCascaderClick"
        @change="handleChange">
        <template slot-scope="{data}">
          <span  v-text="data.name" :title="data.name"></span>
        </template>
      </el-cascader>
    </div>
</template>
<script>
export default {
  name: 'test',
  data () {
    return {
      value: [],
      options: [],
      props: {
        checkStrictly: true,
        value: 'id',
        label: 'name',
      },
      timer: null,
    }
  },
  methods: {
    handleChange() {
      const el = this.$refs.cascader;
      const mark = el.getCheckedNodes()[0] &&  el.getCheckedNodes()[0].children.length;
      if(!mark) {
        el.dropDownVisible = false;
      }
    },
    onCascaderClick(value) {
      if(value) {
        this.timer = setInterval(() => {
          document.querySelectorAll('.el-cascader-node__label').forEach((el) => {
            el.onclick = function() { // 此处不能用箭头函数 当前this 获取到的是节点span标签
              if(this.previousElementSibling) this.previousElementSibling.click();
            }
          })
        }, 500)
      } else {
        if(this.timer) {
          clearTimeout(this.timer)
        }
      }
    }
  },
  created () {
    // 本地 mock 数据 可以不用关注
    const options = [
      {
        id: 'shejiyuanze',
        name: '设计原则aaaaaaaaaa丫丫aaaa哈哈',
        children: [{
          id: 'yizhi',
          name: '一致'
        },{
          id: 'fankui',
          name: '反馈'
        }]
      },
      {
        id: 'daohang',
        name: '导航',
        children: [{
          id: 'cexiangdaohang',
          name: '侧向导航'
        }]
      }
    ]
    this.options = options;
  }
}
</script>

<style lang="scss">
  // 样式需要定义为全局, 如果加上scoped 个人实践未生效
  .el-cascader-node .el-radio {
    display: none;
  }
  .el-cascader-node__label {
    width: 150px;
    box-sizing: border-box;
    span {
      width: 100%;
    }
  }
</style>

1. 悬浮展示节点内容

   
   悬浮展示节点内容

2. 支持任意节点选中

   
   选中父节点
   切换选中节点
   ending

注: 之前分享过 级联选择器叶子节点任意选中, 主要是通过提高 级联中 radio 按钮的层级,实现的伪选中; 但是如果节点的内容过多, 会造成展示不友好; 直接用 template 插入内容, 添加 title 属性, 无法实现效果, 因为 radio 按钮层级过高, 鼠标无法悬浮到展示内容的节点上;*

参考文档