项目使用vue+element-ui
tooltip-effect="light" <el-table>需要设置这个属性, 然后在需要使用的<el-table-column>中使用 show-overflow-tooltip="true" 既能实现效果
<!--表格数据及操作-->
<el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="light">
<!--勾选框-->
<el-table-column type="selection" width="55">
</el-table-column>
<!--索引-->
<el-table-column type="index" :index="indexMethod">
</el-table-column>
<el-table-column prop="date" label="日期" width="180" sortable>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="编辑" width="100">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
</template>
</el-table-column>
<el-table-column label="删除" width="100">
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
显示效果
有两点需要注意:
①el-table标签中需要添加tooltip-effect="dark"属性
②el-table-column标签中需要添加show-overflow-tooltip属性
默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。