控制 el-tooltip 组件是否显示：有省略号显示，没有省略号不显示

<el-row v-loading="loading" :gutter="30" class="warning-wrapper">
<el-col
  v-for="(risk, index) in tableData"
  :key="index + '' + risk.zrr"
  :lg="8"
  :md="8"
  :sm="12"
  :xl="8"
  :xs="12"
  class="warning-item"
>
  <el-card class="warning-card">
    <div>
      <el-popover :offset="-100" placement="bottom-start" trigger="click" width="380">
        
        <div slot="reference" class="header-text">
          
          <el-tooltip
            effect="dark"
            :content="risk.zrrView"
            placement="top-start"
            :disabled="tooltipIsShow"
          >
            <span
              :class="['name', `zrrView${index}`]"
              @mouseenter="tooltipIsDisHandler(`.zrrView${index}`)"
            >
              {{ risk.zrrView }}
            span>
          el-tooltip>
          <el-tooltip
            effect="dark"
            :content="risk.zrrView !== risk.ssbmView ? risk.ssbmView : ''"
            placement="top-start"
            :disabled="tooltipIsShow"
          >
            <span
              v-if="risk.zrrView !== risk.ssbmView"
              :class="['site', `ssbmView${index}`]"
              @mouseenter="tooltipIsDisHandler(`.ssbmView${index}`)"
            >
              {{ risk.ssbmView }}
            span>
          el-tooltip>
          
          
        div>
      el-popover>
      <div class="warning-people" @click="openDetail(risk)">
        <div class="article-points">
          <el-tooltip
            class="item"
            effect="dark"
            :content="risk.mxmc"
            placement="top-start"
            :disabled="tooltipIsShow"
          >
            <div
              :class="[`mxmc${index}`]"
              @mouseenter="tooltipIsDisHandler(`.mxmc${index}`)"
            >
              XXXX: {{ risk.mxmc }}
            div>
          el-tooltip>
          <div>XXXX: {{ risk.cjsj }}div>
        div>
      div>
    div>
  el-card>
el-col>
el-row>
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

data() {
  return {
    // ...
    tooltipIsShow: false // 是否展示tooltip
  }
},
tooltipIsDisHandler(className) {
 this.$nextTick(() => {
    const dom = document.querySelector(className)
    const domScrollWidth = dom && dom.scrollWidth
    const domClientWidth = dom && dom.clientWidth
    this.tooltipIsShow = domClientWidth >= domScrollWidth
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

【注意】：span标签要 display:inline-block;

.name,
.site {
  display: inline-block; /* 【主要点 主要代码】不然取不到 dom.scrollWidth 和 dom.clientWidth */
  // width: calc(50% - 100px);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
1
2
3
4
5
6
7
8
9

注：最开始想的解决办法

最开始想的解决办法 （实现不了，因为在 this.$nextTick() 中计算的结果在 tooltipIsDisHandler 中无法直接 return）

或者如果不用 $nextTick() 可以取到 dom 的话就不用 $nextTick() ，这样就可以直接 return