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. 展示效果

鼠标移动至❓上时，展示内容如下