[ElementUI]el-table-column（表头）使用 :render-header 实现el-select（下拉框）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33824312/article/details/85011635

本文讲述使用ElementUi的表格时，表头实现下拉框的功能：
实现的效果图如下所示：

表格的定义

<el-table :data="tableLogData" style="width: 100%" header-cell-class-name="header-cell-color" v-loading="listLoading">
                          <el-table-column  prop="level" min-width="100"  :render-header="renderLastHeader"></el-table-column>
        </el-table>

renderLastHeader方法：

renderLastHeader(h) {
		//下拉框选项
                let filters = [{text: '全部', 'value': "全部"}, {text: 'INFO', 'value': "INFO"}, {text: 'WARN', 'value': "WARN"}, {text: 'ERROR', 'value': "ERROR"}];

		//下拉框内容包裹在一个div里面
                return h('div',{
                        style: {
                            height:'56px'
                        },

                },[
                    h("span",{//div里面有一个文字提示：下拉框所属内容
                        style: {
                        },
                        class:'level-font-class'
                    },"日志级别"),
                    h('el-select',{//el-select实现下拉框
                    on:{
                        input: (value) => {//随着下拉框的不同，文字框里的内容在边
                            this.logLevel = value;
                        },
                    },
                    props:{
                        value:this.logLevel,//文字框的内容取决于这个value，如果value不存在，会报错
                    },
                },[
                //下拉框里面填充选项，通过filters遍历map，为每一个选项赋值。
                    filters.map(item => {
                        return h("el-option", {
                            props: {
                                value: item.value,
                                label: item.text
                            }
                        })
                    })

                ])])


            },

以上是完整代码，在vue的环境中，均能运行。