el-table中表头和内容文本居中

在Element UI的el-table组件中，要使表头和内容文本居中，可以通过设置el-table的header-cell-style和cell-style属性来实现。以下是一个实例代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{ textAlign: 'center' }"
    :cell-style="{ textAlign: '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>

在这个例子中，header-cell-style属性设置了表头的样式，cell-style属性设置了单元格的样式，并通过textAlign: 'center'实现了居中对齐。这样表格的表头和内容都会在单元格中居中显示。