el-table表头文字居中
时间: 2023-08-08 07:04:30 浏览: 2696
要让 el-table
表头文字居中,可以通过设置 header-align
属性来实现。具体的实现方法如下:
<el-table :data="tableData" header-row-style="text-align:center" header-align="center">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
其中,header-align
属性可以设置表头文字的水平对齐方式,这里设置为 center
即可让表头文字居中。同时,为了让表头样式更好看,还可以设置 header-row-style
属性来调整表头行的样式,这里通过设置 text-align:center
来让表头文字居中。
相关问题
el-table 表头文字居中
要让el-table表头文字居中,可以在el-table标签中加入:header-cell-style="{ 'text-align': 'center' }"
。这样可以设置表头单元格的样式使其居中显示。
例如:
<el-table :data="tableData" stripe border highlight-current-row :header-cell-style="{ 'text-align': 'center' }">
<el-table-column label="序号" type="index" width="80"></el-table-column>
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column prop="num" label="数量" sortable width="100"></el-table-column>
</el-table>
如果还想让表格内容也居中显示,可以在el-table标签中加入:cell-style="{ 'text-align': 'center' }"
。
例如:
<el-table :data="gridData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
<el-table-column label="名称" prop="realname" align="center"></el-table-column>
</el-table>
el-table表头文字居中对齐
在Element UI的el-table组件中,如果你想让表头的文字内容水平居中显示,你可以通过设置cell-style
属性来实现。这个属性接受一个函数,你在函数内部可以操作单元格的样式。例如:
<template>
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
prop="name"
label="姓名"
cell-style="text-align: center;"
></el-table-column>
<!-- 其他列... -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 },
// ...
]
};
}
};
</script>
这里的text-align: center;
会将name
列的文本内容居中对齐。
相关推荐
















