How to set the table header style of iview, because the table header style of the design drawing is different

UI component of table of iview used

then I want to customize the style of the header, but I can"t find a solution. The solution I found is wrong

related codes

header data:

 tableColumns () {
                let columns = [];
                // if (this.showCheckbox) {
                //     columns.push({
                //         type: "selection",
                //         width: 60,
                //         align: "center"
                //     })
                // }
               
                if (this.showIndex) {
                    columns.push({
                        title: "",
                        type: "index",
                        width: 150,
                        align: "center",
                    })
                }
                columns.push({
                    title: "",
                    key: "contentTitle",
                    width: 150,
                    align: "center",
                    ellipsis:"true",
                });
                columns.push({
                    title: "",
                    key: "contentGrade",
                    width: 200,
                    align: "center",
                    ellipsis:"true",
                });
                columns.push({
                    title: "",
                    key: "lastyearGrade",
                    align: "center",
                    ellipsis:"true",
                });
                columns.push({
                    title: "",
                    key: "lastyearRank",
                    align: "center",
                    ellipsis:"true",
                });
                columns.push({
                    title: "",
                    key: "contentImg",
                    width: 200,
                    align: "center",
                    ellipsis:"true",
                    render: (h, params) => {
                        // return h("div", 
                        // [
                        //     h("img",{
                        //         attrs:{
                        //             "src":this.config_obj.imgupload+ this.sublistdata[params.index].contentImg,
                        //         },
                        //         style:{
                        //             maxHeight:"22px",
                        //         }
                        //     })
                        // ]);
                    }
                });
                return columns;
            }

I expect to achieve such an effect: such table header background, words and those words are not important

Mar.31,2021

overwrite header CSS style

Menu