el-table表格内容居中

在Element UI中，要使el-table的内容居中，可以通过设置el-table的cell-class-name属性来指定单元格的类名，然后在CSS中定义该类名的样式。

以下是实现内容居中的示例代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    cell-class-name="table-cell-center"
  >
    <!-- 列定义 -->
    <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>
 
<script>
export default {
  data() {
    return {
      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 弄'
      }]
    }
  }
}
</script>
 
<style>
/* CSS样式 */
.table-cell-center {
  text-align: center;
  vertical-align: middle;
}
</style>

在上述代码中，cell-class-name="table-cell-center" 指定了一个类名 table-cell-center，该类名在CSS中定义了文本水平和垂直居中。这样，el-table 的所有单元格内容都会居中显示。