方式一
整个表格和内容居中的方式:
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>
方式二
单个表格的内容居中:只需要在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>
方式三
使用回调函数,
<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>