ElementUI之el-table標題列中顯示el-tooltip

1. el-table標題列中顯示el-tooltip

1. 在el-table-column標簽內添加具名插槽v-slot:header

2. 在el-tooltip標簽中使用具名 slot 分發content，實現標題列顯示多行文本的顯示效果

2. 實現代碼

table.vue內容如下

<template><div style="margin: 100px;padding: 100px"><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="訂單日期"width="180"></el-table-column><el-table-columnprop="name"label="收貨人姓名"width="180"></el-table-column><el-table-columnprop="address"label="收貨地址"><template v-slot:header><span>收貨地址</span><el-tooltip placement="top"><i class="el-icon-question"></i><div slot="content" style="font-size: 16px">1.收貨地址請填寫詳細地址 <br/>2.如果收貨地址有變請聯系客服更新<br>3.為避免地址輸入錯誤，請仔細核對幾次</div></el-tooltip></template></el-table-column></el-table></div></template><script>
export default {data() {return {tableData: [{date: '2024-04-02',name: '張三',address: '上海市普陀區金沙江路222號'}, {date: '2024-05-04',name: '李四',address: '北京市石景山區八角東街124號'}, {date: '2024-05-26',name: '王五',address: '西安市雅塔區256號'}]}}
}
</script>

3. 展示效果

鼠標移動至?上時，展示內容如下