el-cascader级联选择器通过tooltip显示全路径

需求: 在前端使用element-ui的级联选择器的时候,经常会出现因为组件展示不了全路径而造成不便,如图:
在这里插入图片描述
现在需要在鼠标悬浮的时候展示出全路径。

// 组件源码取自element-ui官网并删减部分数据,链接为https://element.eleme.cn/#/zh-CN/component/cascader
<template>
  <div id="root">
    <el-cascader
      v-model="value"
      :options="options"
      ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
      return {
        value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, ]
          },]
        }]
      };
  }
}
</script>

实现: 显示全路径的话,由于el-cascader没有相关配置参数,因此需要结合el-tooltip组件来进行展示

<div id="root">
    <el-tooltip :content="showContent" :disabled="!showContent">
      <el-cascader
        v-model="value"
        :options="options"
        ></el-cascader>
    </el-tooltip>
  </div>

然后通过监视绑定值value变化(或者触发组件的change事件)修改showContent的值来控制tooltip的显示。
这里需要先给组件增加ref属性(如果使用触发change事件需要给组件绑定事件)

<template>
  <div id="root">
    <el-tooltip :content="showContent" :disabled="!showContent">
      <el-cascader
        ref="cascader"
        v-model="value"
        :options="options"
        @change="handleChange"></el-cascader>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  // data部分省略,注意需要新加showContent属性
  methods: {
    handleChange(value){
      this.handleContent(value)
    },
    handleContent(value){
      // 获得当前组件
      const cascader = this.$refs.cascader
      // 根据变化后的值获得节点信息
      // 如果项目中绑定的value值经过处理不是数组而是选中的叶子节点的value,则可以直接获取节点
      // const node = cascader.panel.getNodeByValue(value)
      // 否则需要先获得叶子节点值再获得节点。由于cascader默认保存的value数据是按从父到子的顺序保存的,因此数组中的最后一个值就是叶子节点值
      const leaf = value[value.length-1]
      const node = cascader.panel.getNodeByValue(leaf)
      // 获得全路径内容
      this.showContent = node.getText(cascader.showAllLevels, cascader.separator)
    }
  },
}

如果使用监视value则在watch中调用handleContent,注意需要传入的是监视修改后的newVal值

效果: 最后实现效果如下
在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值