Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容

简介: Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容

需求描述

  1. 获取 el-cascader 选中内容的 label 数据
  2. 选中内容较长时,超长内容默认省略号显示,添加鼠标悬浮提示效果,显示完整内容。

最终效果

核心代码

    // 获取级联选择器选中数据的内容
    getdata() {
      this.labelString = this.$refs.cascader_Ref.getCheckedNodes()[0].pathLabels.join(" / ");
    },

完整代码

<template>
  <div style="padding: 30px">
    <div class="block">
      <el-tooltip
        :disabled="!labelString"
        effect="dark"
        :content="labelString"
        placement="top-start"
      >
        <el-cascader
          size="small"
          @change="valueChange"
          v-model="value"
          :options="options"
          ref="cascader_Ref"
        ></el-cascader>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelString: "",
      value: [],
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致——最终值过长测试数据1",
                },
                {
                  value: "fankui",
                  label: "反馈——最终值过长测试数据2",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    valueChange() {
      this.getdata();
    },
    // 获取级联选择器选中数据的内容
    getdata() {
      this.labelString = this.$refs.cascader_Ref.getCheckedNodes()[0].pathLabels.join(" / ");
    },
  },
};
</script>

目录
相关文章
|
2月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
316 12
|
2月前
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
760 0
|
7月前
|
图形学
unity判断鼠标在不在UI上
在 Unity 中,判断鼠标是否在 UI 上主要依赖事件系统和射线检测机制。Unity 的事件系统负责处理输入事件,GraphicRaycaster 组件用于检测射线与 UI 元素的相交情况。通过 `EventSystem.current.IsPointerOverGameObject()` 方法可轻松判断鼠标是否在 UI 上。对于移动端,使用 `EventSystem.current.IsPointerOverGameObject(Input.GetTouch(0).fingerId)` 来判断触摸是否在 UI 上。代码实现简单且高效。
|
9月前
|
存储
「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
本篇将带你实现一个颜色选择器应用。用户可以从预设颜色中选择,或者通过输入颜色代码自定义颜色来动态更改界面背景。该应用展示了如何结合用户输入、状态管理和界面动态更新的功能。
221 3
「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
|
10月前
|
UED
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
本篇将带你实现一个滑动选择器应用,用户可以通过滑动条选择不同的数值,并实时查看选定的值和提示。这是一个学习如何使用 Slider 组件、状态管理和动态文本更新的良好实践。
140 1
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
|
11月前
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
1079 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
11月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
861 0
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
247 0
|
4月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
160 15
|
4月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
150 11

热门文章

最新文章