element-ui自定义table表头，render-header使用

最新推荐文章于 2026-05-14 10:48:04 发布

原创最新推荐文章于 2026-05-14 10:48:04 发布 · 7.3k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

这篇博客介绍了如何在Vue的el-table组件中自定义表头，包括添加图标、el-tooltip提示和单选框。通过renderHeader方法，结合h函数创建元素，实现了在表头后添加icon、显示tooltip提示以及实现选中事件的监听。

<template>
    <el-table :data="tableData2" style="width: 100%">
        <el-table-column prop="address" label="地址" :render-header="renderHeader">
            <!--渲染render事件 -->
        </el-table-column>
    </el-table>
</template>

// 在表头后添加icon

methods:{
renderHeader(h, { column }) {
            // h即为cerateElement的简写，具体可看vue官方文档
            return h('div', [
                h('span', column.label),
                h('i', {
                    class: 'el-icon-question',
                }),
            ]);
        },
}

//在表头添加el-tooltip

renderHeader(h, { column }) {
            return h('div', [
                h('span', column.label),
                h(
                    'el-tooltip',
                    {
                        props: {
                            effect: 'dark',
                            content: '这是一个提示',
                            placement: 'top',
                        },
                    },
                    [
                        h('i', {
                            class: 'el-icon-question',
                            style: 'color:#409eff;margin-left:5px;',
                        }),
                    ],
                ),
            ]);
        },

// 在表头后添加一个单选框

renderHeader(h, { column }) {
            // h即为cerateElement的简写，具体可看vue官方文档
            return h('div', [
                h('span', column.label),
                h('el-checkbox', {
                    style: 'margin-left:5px',
                    on: {
                        change: this.select, // 选中事件
                    },
                }),
            ]);
        },
        // 添加选中事件
        select(data) {
            console.log(data);
        },

标签

#vue #html