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

Posted 2021-08-14 晚星@

<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);
        },