elementUI table 给表头添加气泡显示（鼠标悬浮显示注释）

本文主要是介绍elementUI table 给表头添加气泡显示（鼠标悬浮显示注释），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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-buttonsize="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: stringname: stringaddress: 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>