el-table 列内容溢出 显示省略号 悬浮显示文字

第一种方案：利用 title 的方式

利用插槽与title，自己对 el-table-column 显示内容及样式进行修改；

<el-table-column prop="user_info" label="用户信息" width="120">
	<template slot-scope="scope">
		<span
            :title="scope.row.user_info"
            style="
                display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                white-space: pre-line;
            "
            >
            {{ scope.row.user_info}}
        span>
    template>
el-table-column>

 

第二种方案：利用 show-overflow-tooltip

官方文档：

这里是对显示主题的设置，dark 是黑色； light 是白色； 如果不写，就是黑色；

 关键属性

 

 

 实现代码：

<el-table :data="tableData" tooltip-effect="light">
	<el-table-column prop="user_info" label="用户信息" width="120" :show-overflow-tooltip="true">el-table-column>
el-table>

 

第三种方案： 利用 el-popover （Popover 弹出框）

官方文档：el-popover Attributes

 

<el-table-column prop="user_info" label="用户信息">
	<template slot-scope="scope">
		<el-popover trigger="hover" placement="top">
			<span>{{ scope.row.user_info }}span>
              <div slot="reference">
                <span style="
                    display: -webkit-box;;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    white-space: pre-line;
                    ">
                    {{ scope.row.user_info }}
                span>
              div>
        el-popover>
    template>
el-table-column>

第四种方案：el-tooltip  (Tooltip 文字提示)

官方文档：el-tooltip Attributes

 

<el-table-column prop="user_info" label="用户信息">
	<template slot-scope="scope">
		<el-tooltip :content="scope.row.user_info" placement="top" effect="light">
			<span style="
                    display: -webkit-box;;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    white-space: pre-line;
                    ">
                    {{ scope.row.user_info }}
                span>
        el-tooltip>
    template>
el-table-column>

其他方案：（待完善。。）

1、可以在点击单元格的时候，展开全部内容；可以在省略文字和全部文字之间切换；

2、可以先对内容长度进行判断，然后对超出的显示内容进行截取操作，点击显示全部；

3、通过动态类名的方式实现；

4、。。。此处省略 1 万字；

5、感谢！