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

Z时代
2024-01-10
分类：技术分享

使用的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;}