vue2 - Antd Table组件的头部单元格字体加粗，文字内容居中解决办法：-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2 - Antd Table组件的头部单元格字体加粗，文字内容居中解决办法：。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最终要求效果：

customheadercell,vue.js,前端,javascript,vue2,a-table

设置表头字体加粗:

问题：默认情况下，英文字体加粗，中文字体不加粗，

解决办法：

在当前.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', //头部单元格和列内容水平居中
	}
}