方法一
在每个el-table-column上加上align="center"
<el-table :data="tableData" style="width: 100%">
<el-table-column align="center" prop="date" label="日期" width="180">
</el-table-column>
<el-table-column align="center" prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column align="center" prop="address" label="地址">
</el-table-column>
</el-table>
方法二
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-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>
方法三
使用回调函数
<template>
<div class="table">
<el-table
:data="tableData"
:header-cell-style="textCenter"
:cell-style="textCenter"
style="width: 100%"
>
<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>
</template>
<script>
export default {
methods:{
textCenter(){
return {'text-align':'center'}
}
}
};
</script>