elementUi——table表格中字段内容超过2行后，省略号...展示，不超过两行不处理。超过两行再显示全部。_table表格里的内容最多展示两行

elementUi——table表格中字段内容超过2行后，省略号…展示，不超过两行不处理。超过两行再显示全部。

elementUi框架中，table表格中的字段，当内容过长时，如果全部展示则会导致页面很丑，此时有个需求就是两行内全部展示，超过两行则…展示。鼠标移入后再展示全部内容。

之前遇到一个需求，是一个最基本的需求了。
要求在table表格中的字段内容超过2行时，省略号展示，鼠标移入到此单元格时，内容展示完整。

1.鼠标移入后的效果可以通过以下代码实现

<el-table-column label="位号" width="90" prop="tagNumber" align="center">
    <template slot-scope="scope">
        <el-popover placement="top-start" v-else
                    title="位号"
                    width="200"
                    trigger="hover"
                    :content="scope.row.tagNumber">
            <div slot="reference" class="twoLineCls">{{scope.row.tagNumber}}</div>
        </el-popover>
    </template>
</el-table-column>
1
2
3
4
5
6
7
8
9
10
11

2.css样式

.twoLineCls{
	text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
}
1
2
3
4
5
6
7
8
9

完成！！！

不足两行的不显示弹窗，只有超出两行的再显示弹窗

我这边的思路就是：获取dom的高度，如果是超出隐藏的，则高度会是一个固定值，除了此值以外的都默认为不足两行的情况。

下面的标签是antd的，如果是element的，则需要改动一下组件名称，思路是可以参考的。

1.1 插槽展示某一列的内容，注意要给此列添加width固定宽度

我这边发现当超过两行时，元素的高度是39，不超过两行的要么是一行的20高度，要么是两行的40，因此我只需要判断是否高度是39就可以判断出来是否是超出两行的内容了。

这个办法不是很巧妙，但是可以借鉴此思路来进行处理。
还有一个思路就是，通过$refs可以拿到dom，则dom中的内容可以拿到了，如果这个内容跟某个字段的值不完全一样，则表示是超出两行的情况。这个会比较稳妥一点。可以尝试处理一下。

 <div
        slot="productName"
        slot-scope="text, record, index"
        style="max-height: 40px"
      >
        <div :ref="'productName' + index" class="detailCls">
          <a-tooltip v-if="productNameStyle[index] == 39">
            <template slot="title"> {{ text }} </template>
            {{ text }}
          </a-tooltip>
          <div v-else>
            {{ text }}
          </div>
        </div>
      </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1.2 获取到表格数据后，需要对表格中的字段进行判断处理

getProductNameStyle() {
      this.productNameStyle = [];
      this.$nextTick(() => {
        this.list.forEach((list, index) => {
          let height = parseFloat(
            window.getComputedStyle(this.$refs['productName' + index]).height
          );
          console.log(height);
          this.productNameStyle.push(height);
        });
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12

完成！！！多多积累，多多收获！！！