最终要求效果:

设置表头字体加粗:

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

解决办法:

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐