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>

目录
相关文章
|
20小时前
|
UED
Element UI 一键校验多表单(v-for循环表单,异步校验规则,v-for 中的 ref 属性,避坑 forEach 不支持异步 await )
Element UI 一键校验多表单(v-for循环表单,异步校验规则,v-for 中的 ref 属性,避坑 forEach 不支持异步 await )
2 0
|
2天前
|
数据安全/隐私保护
Element UI 密码输入框--可切换显示隐藏,自定义图标
Element UI 密码输入框--可切换显示隐藏,自定义图标
7 0
|
2天前
Element UI 表格【列宽自适应】
Element UI 表格【列宽自适应】
4 0
|
2天前
|
前端开发
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
|
2天前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
6 0
|
2月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍