一、方法一：
在每个el-table-column标签上边设置align="center"
文档element：
1.png
image.png
代码展示：
<el-table :data="tableData" style="width: 60%" border height="240">
<el-table-column prop="date" label="日期" width="180" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
</el-table>
结果展示：（这个是表头和表格数据都居中）
[图片上传中...(image.png-143669-1587979588471-0)]
123.png
方法二、（这个是表头内容居中的方法）
1.在el-table的标签添加一个属性方法：:header-cell-style="headClass"
2.在methods中设置一个headClass方法
文档：
image.png
image.png
代码展示：
<el-table :data="tableData" style="width: 60%" border height="240" :header-cell-style="headClass">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
methods: {
headClass() { //表头居中显示
return "text-align:center"
},
}
效果展示：
image.png
方法三、（让表格的数据居中显示）
操作步骤：
1.在el-table标签中添加属性 :cell-style="rowClass"
2.在methods方法中定义方法rowClass
文档演示：
image.png
代码展示：
<el-table :data="tableData" style="width: 60%" border height="240" :cell-style="rowClass">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
methods: {
rowClass() { //表格数据居中显示
return "text-align:center"
}
}
结果展示：
image.png
整体代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app {
margin-left: 100px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="app">
<el-table :data="tableData" style="width: 60%" border height="240">
<el-table-column prop="date" label="日期" width="180" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
</el-table>
<!-- <el-table :data="tableData" style="width: 60%" border height="240" :header-cell-style="headClass" > -->
<el-table :data="tableData" style="width: 60%" border height="240" :cell-style="rowClass">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
methods: {
headClass() { //表头居中显示
return "text-align:center"
},
rowClass() { //表格数据居中显示
return "text-align:center"
}
}
})
</script>
</body>
</html>
