elementui鼠标悬浮表头显示文字提示 and el-table 列内容溢出 显示省略号 悬浮显示文字

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

elementui鼠标悬浮表头显示文字提示

1.在需要出现的位置添加

:render-header="renderHeader"

<el-table-column
          prop="fybh"
          label="房源编号"
          :render-header="renderHeader"
          sortable>
</el-table-column>

2.添加 renderHeader 方法

renderHeader(h,data){
      return h("span", [
        h(
            "el-tooltip",
            {
              attrs: {
                class: "item",
                effect: "dark",
                content: data.column.label,
                placement: "top",
              },
            },
            [h("span", data.column.label)]
        ),
      ]);
    },

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-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-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>

vue Element组件库 表头添加ICON图标并悬浮提示

任务：当鼠标移动到“门锁状态”的 图标时，弹出提示“xxxxxx”，鼠标移开该提示语消失。

效果：

<el-table-column   prop="commissionCharge"
   align="center"
   width="120"
>
　　<template slot="header" slot-scope="scope">
　　　　<span>手续费
　　　　　　<el-tooltip
　　　　　　　　:aa="scope"
　　　　　　　　class="item"
　　　　　　　　effect="dark"
　　　　　　　　content="我们公司收"
　　　　　　　　placement="top-start"
　　　　　　>
　　　　　　　　<i class="el-icon-question"
　　　　　　   　　style="color: #606266">　　　　　　　　
          </i>　　　　　　
        </el-tooltip>　　　　
      </span>
　　</template>
</el-table-column>