el-table 表头嵌入el-select

1.效果展示

表头select

select change

2.代码实现

el-table -> el-select

• 通过 :render-header="renderTypeHeader" 对 el-table 列标题进行渲染

            renderTypeHeader(h) {
                //下拉框选项
                let filters = [{
                    text: '类型',
                    value: ""
                }, {
                    text: '质量',
                    value: '质量'
                }, {
                    text: '进度',
                    value: '进度'
                }, {
                    text: '安全',
                    value: '安全'
                }, {
                    text: '其他',
                    value: '其他'
                }];
                return (
                    h('el-select',{    //el-select实现下拉框
                        on:{
                            input: (value) => {//随着下拉框的不同，文字框里的内容改变
                                this.typeValue = value;
                                change: this.search();// 文字框里的内容 change事件
                            },
                        },
                        props:{
                            value: this.typeValue,  //文字框的内容取决于这个value
                        },
                    },  [   //下拉框里面填充选项，通过map遍历filters，为每一个选项赋值。
                        filters.map(item => {
                            return h("el-option", {
                                props: {
                                    value: item.value,
                                    label: item.text
                                }
                            })
                        })
                    ])
                )
            }