element-ui 和element-plus 设置table表头/单元格居中

在Element UI和Element Plus中，要设置表格的表头和单元格居中，可以通过设置表格的样式来实现。以下是一个简单的例子，演示如何使用CSS来居中表头和单元格。

首先，确保你已经正确安装并引入了Element UI或Element Plus。

然后，在你的Vue组件中，你可以添加以下的样式代码：

<style scoped>
.el-table th,
.el-table td {
  text-align: center; /* 设置文字居中 */
  vertical-align: middle; /* 设置垂直居中 */
}
</style>

接着，在模板部分，你只需要正常使用Element UI或Element Plus的<el-table>组件即可。

<template>
  <el-table :data="tableData" 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>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ... 填充你的数据
      ]
    };
  }
};
</script>

在这个例子中，.el-table th, .el-table td选择器会选中所有的表头和单元格，然后通过设置text-align: center;和vertical-align: middle;来实现居中。由于我们使用了scoped属性，所以这些样式只会应用到当前组件内的<el-table>元素上。