1.效果展示

表頭select

select change

2.代碼實(shí)現(xiàn)

el-table -> el-select

• 通過 :render-header="renderTypeHeader" 對(duì) el-table 列標(biāo)題進(jìn)行渲染

            renderTypeHeader(h) {
                //下拉框選項(xiàng)
                let filters = [{
                    text: '類型',
                    value: ""
                }, {
                    text: '質(zhì)量',
                    value: '質(zhì)量'
                }, {
                    text: '進(jìn)度',
                    value: '進(jìn)度'
                }, {
                    text: '安全',
                    value: '安全'
                }, {
                    text: '其他',
                    value: '其他'
                }];
                return (
                    h('el-select',{    //el-select實(shí)現(xiàn)下拉框
                        on:{
                            input: (value) => {//隨著下拉框的不同，文字框里的內(nèi)容改變
                                this.typeValue = value;
                                change: this.search();// 文字框里的內(nèi)容 change事件
                            },
                        },
                        props:{
                            value: this.typeValue,  //文字框的內(nèi)容取決于這個(gè)value
                        },
                    },  [   //下拉框里面填充選項(xiàng)，通過map遍歷filters，為每一個(gè)選項(xiàng)賦值。
                        filters.map(item => {
                            return h("el-option", {
                                props: {
                                    value: item.value,
                                    label: item.text
                                }
                            })
                        })
                    ])
                )
            }