el-table-column的表头竖向排列
时间: 2023-10-14 15:28:34 浏览: 47
el-table-column的表头默认是横向排列的,如果需要竖向排列,可以通过以下步骤实现:
1. 在el-table-column标签中添加属性:label-slot-name="columnLabel",表示表头内容将通过一个名为columnLabel的插槽来渲染。
2. 在el-table标签中添加属性:header-row-class-name="column-header",表示表头行的类名为column-header。
3. 在页面的<style>标签或外部的css文件中,添加以下样式:
```
.column-header {
writing-mode: vertical-lr; /* 竖向排列 */
text-align: center; /* 居中 */
}
```
这样就可以实现el-table-column的表头竖向排列了。
相关问题
el-table 的表头竖向排列
el-table 的表头默认是水平排列的,如果需要竖向排列,可以通过以下步骤实现:
1. 在 el-table 标签中添加属性 :header-row-style="{ flexDirection: 'column' }",将表头的排列方式设置为列(column)方向。
2. 在 el-table-column 标签中添加属性 :label="'列名称'",设置列名称。
3. 在 el-table-column 标签中添加属性 :min-width="宽度",设置列宽度。
例如:
```
<el-table :header-row-style="{ flexDirection: 'column' }">
<el-table-column :label="'名称'" :min-width="100"></el-table-column>
<el-table-column :label="'年龄'" :min-width="80"></el-table-column>
<el-table-column :label="'性别'" :min-width="80"></el-table-column>
</el-table>
```
这样,就可以实现 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>
```
在上述代码中,我们将第一个表头“姓名”禁用了,而第二个表头“年龄”则没有被禁用。