element-ui自定義table表頭，render-header使用

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

測試數據

<script>
data() {
        return {
            tableData2: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀區金沙江路 1518 弄',
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀區金沙江路 1518 弄',
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀區金沙江路 1518 弄',
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀區金沙江路 1518 弄',
                },
            ],
        };
    },
</script>

// 在表頭后添加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);
        },