<template>
<el-table :data="tableData">
<el-table-column label="Name">
<template #header>
<div>
Name
<el-tooltip content="Detailed information about the name" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</div>
</template>
<template #default="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
import { ElTable, ElTableColumn, ElTooltip } from 'element-plus';
export default {
components: {
ElTable,
ElTableColumn,
ElTooltip
},
data() {
return {
tableData: [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
// 其他数据
]
};
}
};
</script>
在上面的示例中,我们在 el-table-column
的标题后面添加了一个信息图标,并使用 ElTooltip
组件包裹该图标,设置了提示文字为 "Detailed information about the name",并且将提示文字显示在图标上方。当用户将鼠标悬停在信息图标上时,会显示提示文字。