清哥的小屋

1
OverFlowText.vue
2

3
<!-- 组件功能：文本溢出时，显示tooltip -->
4
<template>
5
  <el-tooltip manual
6
              v-model="isShow"
7
              :disabled="!isShow"
8
              :width="tableWidth"
9
              placement="top">
10
    <div class="tooltip-content"
11
         slot="content">{{ content }}</div>
12
    <div :class="`text-wrap ${rows>1?'text-wrap-column':'text-wrap-row'}`"
13
         @mouseenter="handleMouseenter($event,)"
14
         @mouseleave="handleMouseleave"
15
         :style="rows>1?`-webkit-line-clamp:${rows}`:''">
16
      <slot />
17
    </div>
18
  </el-tooltip>
19
</template>
20

21
<script>
22
export default {
23
  props: {
24
    content: {
25
      // tooltip展示内容
26
      type: String
27
    },
28
    rows: {
29
      // 超过n行省略
30
      type: Number,
31
      default: 1
32
    },
33
    tableWidth: {
34
      // 需要展示tooltip框元素的宽度
35
      type: Number
36
    }
37
  },
38
  data() {
39
    return {
40
      isShow: false
41
    };
42
  },
43
  methods: {
44
    handleMouseenter({ target: { offsetWidth } }) {
45
      // 获取当前文本宽度
46
      let TemporaryTag = document.createElement('span');
47
      TemporaryTag.innerText = this.content;
48
      TemporaryTag.className = 'getTextWidth';
49
      document.querySelector('body').appendChild(TemporaryTag);
50
      let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
51
      document.querySelector('.getTextWidth').remove();
52
      /* cellWidth为表格容器的宽度 */
53
      const cellWidth = offsetWidth;
54
      /* 当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行 */
55
      currentWidth <= (2 * cellWidth) ? this.isShow = false : this.isShow = true;
56
    },
57
    handleMouseleave() {
58
      this.isShow = false;
59
    }
60
  }
61
};
62
</script>
63

64
<style scoped>
65
.text-wrap {
66
  width: 100%;
67
  overflow: hidden;
68
  word-break: break-word;
69
  box-sizing: border-box;
70
}
71

72
.text-wrap-row {
73
  text-overflow: ellipsis;
74
  white-space: nowrap;
75
}
76

77
.text-wrap-column {
78
  display: -webkit-box;
79
  -webkit-box-orient: vertical;
80
}
81

82
.tooltip-content {
83
  max-width: 500px;
84
  word-break: break-word;
85
  white-space: pre-wrap;
86
}
87
</style>

1
/**
2
* width 表格宽度
3
* content 需要显示在tooltip 框中的内容
4
* row 需要几行显示省略号 隐藏文本内容
5
**/
6
<el-table-column prop="subject"
7
                           label="学科"
8
                           align="center"
9
                           width="180">
10
            <template slot-scope="scoped">
11
              <over-flow-text :rows="2"
12
                            :width="180"
13
                             :content="Object.keys(scoped.row.subjects).join('，')">
14
                <div>
15
                  {{ Object.keys(scoped.row.subjects).join('，') }}
16
                </div>
17
              </over-flow-text>
18
            </template>
19
          </el-table-column>