elementUI table 给表头添加气泡显示（鼠标悬浮显示注释）
- 前言：
- 文档显示：（使用插槽，我看看到底是怎么个事儿）
- 文档代码:
- 修改后的效果：
- 页面效果：
前言：
公司出现这样的需求，产品要求给表格的表头部分字段添加解释说明，让用户知道这个字段的详细含义。之前倒是没有遇到过类似的问题，并不清楚怎么添加，于是去看element UI 组件文档。
element UI 文档
文档显示：（使用插槽，我看看到底是怎么个事儿）
文档代码:
<template>
<el-table :data="filterTableData" style="width: 100%">
<el-table-column label="Date" prop="date" />
<el-table-column label="Name" prop="name" />
<el-table-column align="right">
<template #header> //利用具名插槽，对表头进行自定义
<el-input v-model="search" size="small" placeholder="Type to search" />
</template>
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
Edit
</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>
Delete
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
interface User {
date: string
name: string
address: string
}
const search = ref('')
const filterTableData = computed(() =>
tableData.filter(
(data) =>
!search.value ||
data.name.toLowerCase().includes(search.value.toLowerCase())
)
)
const handleEdit = (index: number, row: User) => {
console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
console.log(index, row)
}
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'John',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Jessy',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
修改后的效果：
<template>
<el-table :data="filterTableData" style="width: 100%">
<el-table-column prop="department" align="center" label="标**值">
<template #header>
<span>标**值</span>
<!-- 使用气泡组件展示注释内容-->
<el-tooltip class="box-item" effect="dark" content="超出标**值时达到相关等级" placement="top-start">
<el-icon>
<InfoFilled />
</el-icon>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</template>
