elementui表头在左侧
时间: 2023-09-01 15:10:38 浏览: 369
如果你想要将 ElementUI 表格的表头放在左侧,可以使用 ElementUI 提供的 `el-table` 组件的 `show-header` 属性和 `template` 插槽来实现。
使用 `show-header` 属性可以隐藏表格的默认表头,然后使用 `template` 插槽来自定义表头的内容,将其放在表格的左侧。
下面是一个示例代码:
```
<template>
<el-table :data="tableData" :show-header="false">
<template slot-scope="{row}">
<tr>
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<td>{{ row.address }}</td>
</tr>
</template>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
</el-table>
</template>
```
在上面的代码中,我们将 `show-header` 属性设置为 `false` 来隐藏表格的默认表头。然后使用 `template` 插槽来自定义表头的内容,将其放在表格的左侧。
注意,我们仍然需要定义 `el-table-column` 组件来定义表格的列,因为这些列将用于排序和筛选。但是这些列的 `label` 属性将不会在表格中显示。
阅读全文