700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue2 - Antd Table组件的头部单元格 字体加粗 文字内容居中

vue2 - Antd Table组件的头部单元格 字体加粗 文字内容居中

时间:2019-05-09 06:27:40

相关推荐

vue2 - Antd Table组件的头部单元格 字体加粗  文字内容居中

最终要求效果:

设置表头字体加粗:

问题:默认情况下,英文字体加粗,中文字体不加粗,

解决办法:

在当前.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表, 只有表头居中:实际投入人力列

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。