
ElementUI之el-table标题列中显示el-tooltip
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
ElementUI之el-table标题列中显示el-tooltip
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"
border
style="width: 100%">
<el-table-column
prop="date"
label="订单日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="收货人姓名"
width="180">
</el-table-column>
<el-table-column
prop="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. 展示效果
鼠标移动至❓上时,展示内容如下




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:6 个月前 )
c345bb45
10 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 10 个月前
更多推荐
所有评论(0)