Vue-element设置表头

<!-- 组件名称 -->
<template>
    <div class=''>
        <el-table-column prop="level" min-width="100" :render-header="renderHeader"></el-table-column>
    </div>
</template>

<script>
    export default {
        props: {

        },
        components: {

        },
        data() {
            return {
                selectVal: ''
            }
        },
        methods: {
            // 1、renderHeader方法---基础
            renderHeader(h, {
                column,
                $index
            }) {
                return h("div", {
                    attrs: {
                        class: "cell" //ele原来样式
                    },
                    domProps: {
                        innerHTML: '<span class="red">* </span>' + column.label
                    }
                });
            },
            // 2、renderHeader方法---添加checkbox
            renderHeader(h, {
                column
            }) {
                return h("span", [
                    h("span", column.label),
                    h("el-checkbox", {
                        style: "margin-top: 5px;",
                        on: {
                            change: this.change
                        }
                    })
                ]);
            },
            change(val) {
                console.log(val);
            },
            // 3、renderHeader方法---表头添加提示
            renderHeader(h, {column,$index}){
                let columnHtml = ''
                if (column.label != '应付金额') {
                    columnHtml = ''
                } else {
                    columnHtml = h ('el-tooltip', {
                        props: {
                            content: `用户使用权益卡之后订单的应付金额，且为支付成功时的应付金额，后续此处不更新。即（批次费用-权益卡优惠+其他费用-优惠）+保险，其中（其他费用-优惠）最小为0。`,
                            placement: 'top',
                            effect: 'light'
                        }
                    }, [
                        h ('span', {
                            class: {
                                'el-icon-question': true
                            }
                        })
                    ])
                }
                return h('span', [
                    h ('span', column.label),
                    columnHtml
                ])
            },
            // 4、renderHeader方法---添加select
            renderHeader(h, {
                column
            }) {
                //下拉框选项
                let filters = [{
                        text: "全部",
                        value: "0"
                    },
                    {
                        text: "选项1",
                        value: "1"
                    },
                    {
                        text: "选项2",
                        value: "2"
                    },
                    {
                        text: "选项3",
                        value: "3"
                    }
                ];

                //下拉框内容包裹在一个div里面
                return h(
                    "div", {
                        style: {
                            color: "#f80"
                        }
                    },
                    [
                        h(
                            "span", {
                                //div里面有一个文字提示：下拉框所属内容
                                style: {},
                                class: "level-font-class"
                            },
                            "其它"
                        ),
                        h(
                            "el-select", {
                                on: {
                                    input: value => {
                                        this.selectVal = value; // v-model
                                    }
                                },
                                props: {
                                    value: this.selectVal //文字框的内容取决于这个value，如果value不存在，会报错
                                }
                            },
                            [
                                //下拉框里面填充选项，通过filters遍历map，为每一个选项赋值。
                                filters.map(item => {
                                    return h("el-option", {
                                        props: {
                                            value: item.value,
                                            label: item.text
                                        }
                                    });
                                })
                            ]
                        )
                    ]
                );
            },
        },
        computed: {

        },
        watch: {

        },
        created() {

        },
        mounted() {

        }
    }
</script>

<style lang='scss' scoped>

</style>