最终要求效果：
设置表头字体加粗:
问题：默认情况下，英文字体加粗，中文字体不加粗，
解决办法：
在当前.vue的style增加穿透antd table的表头样式，然后在使用table的外层设置加上class
<template>
<a-card class=" .headBold">
<a-descriptions title="项目情况"></a-descriptions>
<a-table
class="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表， 只有表头居中：实际投入人力列
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/101551.html
