el-table-column表头标题左对齐
时间: 2023-08-04 15:03:20 浏览: 62
你可以使用 `header-align` 属性来设置 `el-table-column` 的表头标题左对齐,将其设置为 `"left"` 即可。例如:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="Name" header-align="left"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
```
相关问题
el-table-column禁用表头
可以使用el-table-column的属性disabled来禁用表头,具体实现方法如下:
```
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" :disabled="true"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
在上述代码中,我们将第一个表头“姓名”禁用了,而第二个表头“年龄”则没有被禁用。
el-table-column左对齐
要使el-table-column中的内容左对齐,可以使用slot-scope来自定义列的内容,并在其中使用div元素来包裹文本内容,并设置div元素的text-align属性为left。具体实现方法如下所示:
```html
<el-table :data="tableData">
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<div style="text-align: left;">{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column label="年龄" prop="age">
<template slot-scope="scope">
<div style="text-align: left;">{{ scope.row.age }}</div>
</template>
</el-table-column>
</el-table>
```
在上述代码中,我们使用了slot-scope来获取每一行的数据,并使用div元素来包裹文本内容,并设置div元素的text-align属性为left,从而实现了el-table-column中的内容左对齐。