vue-elemen表格的表头增加自定义问号描述，render-header传自定义参数

张小胖、

于 2023-06-29 11:04:00 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.youkuaiyun.com/qiguniang_/article/details/131468278

版权

文章介绍了如何在Vue.js项目中利用el-tooltip组件为表格的多个表头添加问号图标，当鼠标悬停时显示不同的描述文案。通过自定义渲染header并在js代码中处理内容，实现了每个表头个性化提示的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、要实现的效果

需要实现的问题

表头增加问号❓
一个表单多个表头，描述文案不同

二、实现方式

使用官网"el-tooltip"，文字提示实现hover展示描述
使用"el-icon-question"图标展示问号❓
使用方法传递自定义参数，实现多个表头不同的描述文案

三、实现过程

html代码

<el-table-column label="招聘状态" prop="value" :render-header="(h,obj) => renderHeader(h,obj,'描述文字1111')"> 
        <template slot-scope="scope">
          {{ scope.row.tags[0].value }}
        </template>
</el-table-column>

js代码

// 表头增加问号❓
    renderHeader(h, { column, $index },content_desc) {
            return [column.label,h(
                'el-tooltip',
                {
                    props: {
                        content: content_desc,
                        placement: 'top'
                    },
                },
                [h('span', { class: {'el-icon-question': true} })]
            )]
        },

至此完成了！！！