最終要求效果：
設(shè)置表頭字體加粗:
問(wèn)題：默認(rèn)情況下，英文字體加粗，中文字體不加粗，
解決辦法：
在當(dāng)前.vue的style增加穿透antd table的表頭樣式，然后在使用table的外層設(shè)置加上class
<template>
<a-card class=" .headBold">
<a-descriptions title="項(xiàng)目情況"></a-descriptions>
<a-table
class="viewtable"
bordered
:columns='projColumns'
:data-source="projectData"
:pagination="false"
>
</a-table>
</a-card>
//..
</template>
//...最后，在當(dāng)前.vue的style增加穿透antd table的表頭樣式
<style lang="less" scoped>
// 表格表頭字體樣式修改
.headBold .ant-table-header-column {
font-weight: bold; // 字體加粗
}
</style>要求2：?文字居中
分2種情況，單獨(dú)設(shè)置表頭，或者所有單元格都居中
單獨(dú)設(shè)置表頭：在設(shè)置列時(shí)，加上方法：customHeaderCell
所有單元格：在設(shè)置第一列時(shí)加上對(duì)齊屬性：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', //頭部單元格和列內(nèi)容水平居中
}
}居中效果：
表頭與內(nèi)容居中：NRE表，? 只有表頭居中：實(shí)際投入人力列文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-607019.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-607019.html
到了這里，關(guān)于vue2 - Antd Table組件的頭部單元格 字體加粗， 文字內(nèi)容居中 解決辦法：的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
