element之自定义表格超出显示省略号并显示文字提示（tooltip）

1. 背景

在一次后台列表开发中，由于表格字段没多少，所以把备注字段也在表格展示了出来，但是因为备注字数较大，所以给 el-table-column 添加了 show-overflow-tooltip 属性。但是，由于备注真的很长，所以显示的文字提示横向占了整个窗口，😱😱天哪，这也太难看了，于是想到了使用 sass 去控制长度，就这样解决了。
但是，需求往往没有这么简单😶😶，又要求显示的字体提示要保留一定的格式，如换行。那这…没办法，只能自己写组件了。

2. 代码

<template>
  <div class="tipContainer"
       ref="tipContainer">
    <el-tooltip
      :disabled="!enableTip"
      ref="tooltip"
      class="item"
      :effect="effect"
      :placement="placement"
      v-bind="$attrs">
      <div class="table-tooltip-tip" slot="content">{{ value }}div>
      <span
        class="table-tooltip-content"
        ref="tooltipContent"
        v-if="noSlot"
        :class="{'ellipsis': enableTip}">{{ value }}span>
      <slot v-else>slot>
    el-tooltip>
  div>
template>

<script>
export default {
  name: "TableTooltip",
  props: {
    // 始终保持提示tip
    tipKeep: Boolean,
    // 内容
    value: String,
    // 提示位置
    placement: {
      type: String,
      default: 'top'
    },
    // 提示主题
    effect: {
      type: String,
      default: 'dark'
    }
  },
  data() {
    return {
      enableTip: false
    }
  },
  computed: {
    noSlot() {
      // 判断有没有插槽（默认插槽除外）
      return !this.$slots.default;
    }
  },
  mounted() {
  	// 比较文字提示组件与父级宽度，用于判断要不要启用文字提示与显示省略号
    if (this.$refs.tipContainer && this.$refs.tooltipContent) {
      const tipWidth = this.$refs.tipContainer.offsetWidth;
      const tipContentWidth = this.$refs.tooltipContent.offsetWidth;
      this.enableTip = tipWidth < tipContentWidth;
    }
  }
}
script>

<style lang="scss" scoped>
.tipContainer {
  overflow: hidden;
  width: 100%;
}

.table-tooltip-tip {
  max-width: 600px;
  white-space: pre-wrap;
}

.table-tooltip-content {
  white-space: nowrap;

  &.ellipsis {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

3. 原理

重新封装了 elementui 的 Tooltip 文字提示组件，通过比较文字提示组件宽度与父级的宽度，来启用提示与显示省略号，然后利用 white-space: pre-wrap; 来格式化文字提示内容。