eltable 合计行添加tooltip

eltable 合计行添加tooltip

• 问题描述：
  eltable 合计行单元格内容过长会换行，需求要求合计行数据超长显示 … ，鼠标 hover 时显示提示信息。
  

• 解决方案：eltable合计行没有对外的修改接口，想法是 自己实现一个tooltip， 为合计行单元添加鼠标移入移出事件，移入显示tooltip，移出隐藏tooltip，tooltip的定位和内容通过移入时拿到单元格位置和内容。

• 实现代码 （最后有优化代码）

<template>
  <div class="content">
    <el-table show-summary :data="data">
      <el-table-column
        v-for="item in header"
        v-bind="item"
        :show-overflow-tooltip="true"
      >
      el-table-column>
    el-table>

    
    <Transition name="el-fade-in">
      <div v-show="toolTipVisble" id="customTooltip" ref="customTooltip">
        {{ tipMsg }}
        <div class="popper__arrow">div>
      div>
    Transition>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
export default {
  components: {},

  data() {
    return {
      //合计行提示
      toolTipVisble: false,
      tipMsg: "",

      header: [
        { label: "列1", prop: "col1", width: "70px" },
        { label: "列2", prop: "col2", width: "70px" },
        { label: "列3", prop: "col3", width: "70px" },
        { label: "列4", prop: "col4", minWidth: "70px" },
      ],
      data: [
        {
          col1: "23333333333333",
          col2: "2345679",
          col3: "66666666666666",
          col4: "4",
        },
        { col1: "2", col2: "2", col3: "3", col4: "4" },
        { col1: "2", col2: "2", col3: "3", col4: "4" },
        { col1: "2", col2: "2", col3: "3", col4: "4" },
        { col1: "2", col2: "2", col3: "3", col4: "4" },
      ],
    };
  },

  mounted() {
    this.setSummaryListener();
  },
  methods: {
    setSummaryListener() {
      let that = this;
      let table = document.querySelector(".el-table__footer-wrapper>table");

      this.$nextTick(() => {
        for (let rowIndex = 0; rowIndex < table.rows.length; rowIndex++) {
          let row = table.rows[rowIndex].cells;
          for (let colIndex = 0; colIndex < row.length; colIndex++) {
            let col = row[colIndex];
            let cells = col.getElementsByClassName("cell");

            if (cells && cells.length > 0) {
              let cell = cells[0];
              if (cell.scrollWidth > cell.offsetWidth) {
                cell.onmouseenter = function () {
                  that.setTooltip(true, rowIndex, colIndex, cell);
                };
                cell.onmouseleave = function () {
                  that.setTooltip(false, rowIndex, colIndex, cell);
                };
              }
            }
          }
        }
      });
    },
    setTooltip(isShow, rowIndex, columnIndex, colEl) {
      this.toolTipVisble = isShow;
      if (isShow) {
        this.tipMsg = colEl.innerText || colEl.textContent;

        let toolTip = this.$refs.customTooltip;
        let rect = colEl.getBoundingClientRect();
        //向上偏移量
        const offsetTop = 50;
        toolTip.style.top = rect.top - offsetTop + "px";
        this.$nextTick(() => {
          const cellBorderWidth = 1;

          toolTip.style.left =
            rect.left -
            (toolTip.offsetWidth / 2 -
              (colEl.offsetWidth + cellBorderWidth * 2) / 2) +
            "px";
        });
      }
    },
  },
};
</script>
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

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

• 实现效果
  
• 瞅瞅源码
  eltable 数据行单元格提示信息show-overflow-tooltip源码实现思路跟上面差不多。
  单元格的提示信息也是绑定鼠标移入移出事件，提示信息用的el-tooltip。
  el-tooltip：这里el-tooltip标签里面没有内容，之后通过鼠标移入事件绑定。
  
  单元格绑定鼠标事件

referenceElm 绑定目标对象（提示信息定位对象）。
  
• 优化一下我自己写的tooltip，用el-tooltip实现。

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120