实现 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(" / ");
},

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