vue3 el-table 表头以及表格文字居中
在Vue 3中,要使得Element Plus的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 setup>
import { ref } from 'vue';
const tableData = ref([
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
// ...更多数据
]);
</script>
在这个示例中,header-cell-style
属性设置了表头的样式,cell-style
属性设置了单元格的样式,并通过textAlign: 'center'
实现了居中对齐。这样表格的表头和单元格中的文字都会居中显示。
评论已关闭