头部居中:header-cell-style
单元格内容居中:cell-style
<el-table
:data="tableData"
:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}"
style="width: 100%">
</el-table>
单个表格的内容(即独列)居中:align='center’
<el-table-column label="名称" prop="nickName" align="center">
</el-table-column>
拓展:
header-cell-style更改表头样式:表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style(上述代码用的是固定的Object的写法,所以在此就不再详细说明了)。这里描述的是如何使用函数写法进行操作
<el-table :header-cell-style="rowClass"></el-table>
<script>
export default {
methods :{
rowClass({ row, rowIndex}) {
console.log(rowIndex) //表头行标号为0
return 'background:red'
}
}
}
</script>
cell-style更改表格中某个单元格的样式:
<el-table :cell-style="cellStyle"></el-table>
<script>
export default {
methods :{
cellStyle({ row, column, rowIndex, columnIndex}) {
if(rowIndex === 1 && columnIndex === 2){ //指定坐标
return 'background:pink'
}else{
return 'background:red'
}
}
}
}
</script>