ElementUI之el-table标题列中显示el-tooltip
文章目录
- ElementUI之el-table标题列中显示el-tooltip
- 1. el-table标题列中显示el-tooltip
- 2. 实现代码
- 3. 展示效果
1. el-table标题列中显示el-tooltip
在
el-table-column标签内添加具名插槽v-slot:header在
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. 展示效果
鼠标移动至❓上时，展示内容如下
