vue2 - Antd Table组件的头部单元格 字体加粗, 文字内容居中
在当前.vue的style增加穿透antd table的表头样式,然后在使用table的外层设置加上class。所有单元格:在设置第一列时加上对齐属性:align: 'center',单独设置表头:在设置列时,加上方法:customHeaderCell。问题:默认情况下,英文字体加粗,中文字体不加粗,分2种情况,单独设置表头,或者所有单元格都居中。
·
最终要求效果:
设置表头字体加粗:
问题:默认情况下,英文字体加粗,中文字体不加粗,
解决办法:
在当前.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表, 只有表头居中:实际投入人力列
更多推荐
所有评论(0)