element plus表格的表头和内容居中

需求

对于 element-plus 中的 table 进行表头和内容的居中显示

分析

1. 单列的表头和内容居中 ：
   在对应的那一列加上align=“center” 即可

<el-table-column prop="name" label="商品名称" align="center" />

2. 表格的所有列表的头和内容居中:
   在el-table上添加下面两行即可

:cell-style=“{ textAlign: ‘center’ }”
:header-cell-style=“{ ‘text-align’: ‘center’ }”

<el-table 
	fit 
	:cell-style="{ textAlign: 'center' }" 
	:data="tableData" 
	style="
		width: 100%" 
		height="350"
       :header-cell-style="{
         background: '#f7f7f7',
         color: 'rgba(0,0,0,.85)',
         'font-weight': '500',
         'text-align': 'center'
       }" 
       v-loading="loading"
  >
     <el-table-column prop="name" label="商品名称" />
  </el-table>