怎么设置iview的table表头样式，因为设计图的table表头样式不同

Question

使用的iview的table的UI组件

然后我想自定义表头的样式，但是始终找不到解决方法，搜到的解决方案是错的

相关代码

表头数据：

 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;
            }

我期待可以实现这样的效果：这样的table表头背景，字那些都不重要

Answer 1

改写表头 CSS 样式