实现 el-cascader 选中的 label 数据过长时，鼠标悬浮显示超长内容

最近在做项目时，遇到如下需求：

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

最终效果如下：

实现代码：

<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>

核心代码：

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

到此就实现了上面我们需要的效果，需要的小伙伴可以拿去参考。

以上关于实现 el-cascader 选中的 label 数据过长时，鼠标悬浮显示超长内容的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。