Element Plus 中,您可以通过自定义表头的方式,在 el-table 的表头中的 el-table-column 标题后面添加一个图标,并且在鼠标悬停时显示提示文字
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<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",并且将提示文字显示在图标上方。当用户将鼠标悬停在信息图标上时,会显示提示文字。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)