最终要求效果:
设置表头字体加粗:
问题:默认情况下,英文字体加粗,中文字体不加粗,
解决办法:
在当前.vue的style增加穿透antd table的表头样式,然后在使用table的外层设置加上class
<template> <a-card class=" .headBold"><a-descriptions title="项目情况"></a-descriptions><a-tableclass="viewtable"bordered:columns='projColumns':data-source="projectData":pagination="false"></a-table></a-card>//..</template>//...最后,在当前.vue的style增加穿透antd table的表头样式<style lang="less" scoped>// 表格表头字体样式修改.headBold .ant-table-header-column {font-weight: bold; // 字体加粗}</style>
要求2:文字居中
分2种情况,单独设置表头,或者所有单元格都居中
单独设置表头:在设置列时,加上方法:customHeaderCell
所有单元格:在设置第一列时加上对齐属性:align: 'center',
Antd Table组件的头部单元格水平居中🧐const columns1 = [{dataIndex: 'title',title: '栏目名称',width: '150px',},{dataIndex: 'show',title: '是否展示',width: '620px',customHeaderCell: () => ({style: {textAlign: 'center', //头部单元格水平居中},}),},{dataIndex: 'align',title: '居中方式',width: 200,scopedSlots: { customRender: 'alignAlias' },align: 'center', //头部单元格和列内容水平居中}}
居中效果:
表头与内容居中:NRE表, 只有表头居中:实际投入人力列