记录element-ui级联选择器输入框内容超出，鼠标悬停显示超出的内容

级联选择器选中数据内容过长，在输入框展示的时候超出的部分会显示省略号，现要求超出部分鼠标悬停会显示完整内容

效果如下：

结合element-ui中的Tooltip 文字提示来实现

代码如下：

<template>
  <div>
    <el-tooltip
      class="item"
      effect="dark"
      :disabled="!labelVal"
      :content="labelVal"
      placement="top-start"
    >
      <el-cascader
        v-model="value"
        :options="options"
        :props="defaultData"
        @change="handleChange"
      ></el-cascader>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultData: {
        label: "label",
        value: "value",
        children: "children",
      },
      labelVal: "", //文字提示内容
      value: [],
      options: [],
    };
  },
  mounted() {
    this.getOption();
  },
  methods: {
    getOption() {
      this.options = [
        {
          value: "zhinan",
          label: "指南999999999999",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则9999999999",
              children: [
                {
                  value: "yizhi",
                  label: "一致999999999",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ];
    },
    handleChange(val) {
      let res = this.getVal(val, this.options, []);
      console.log(res, res.join("/"));
      this.labelVal = res.join("/");
    },
    getVal(data, options, arr) {
      options.forEach((e) => {
        data.forEach((i) => {
          if (i == e.value) {
            arr.push(e.label);
            return;
          } else {
            if (e.children) {
              this.getVal([i], e.children, arr);
            } else {
              return;
            }
          }
        });
      });
      return arr;
    },
  },
};
</script>