0
点赞
收藏
分享

微信扫一扫

Element UI - el-table el-table-column 表头自定义

爪哇驿站 2022-05-18 阅读 153


图例

Element UI - el-table el-table-column 表头自定义_Element UI


代码

<el-table-column width="180">
<template slot="header" slot-scope="scope">
销售提成
<el-tooltip effect="dark" content="若销售提成按“百分比”,则根据“活动价”来计算" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</template>
<template slot-scope="scope">
...
</template>
</el-table-column>


说明

Element UI 提供了一个 render-head 方法,这个我试过了,不好使,不管怎样,结构都是只显示 tooltip 的边框,不显示 tooltip 的背景,查了很多资料,发现 Element UI 还有一个方法自定义表头,自定义表头里面提到使用 Scoped Slot 方法来重置表头,最后,根据这个方法,解决了表头添加 tootip 的问题

Ps:扩展,类似的方法还有很多,比如:表头添加图标类,添加输入框,添加选择框的, 都可以使用这个方法~


举报

相关推荐

0 条评论