el-table 自定义表头斜杠
时间: 2023-11-08 10:06:01 浏览: 255
bookmark-plugin:配合my-bookmart快速添加书签到系统
您可以使用 el-table-column 的 slot-scope 属性来自定义表头,然后在其中使用 CSS transform 属性来实现斜杠效果。具体实现可以参考以下代码:
```html
<el-table :data="tableData">
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<div class="slash-header">
<span>{{ scope.column.label }}</span>
<span class="slash">/</span>
</div>
</template>
</el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
```
```css
.slash-header {
display: flex;
align-items: center;
}
.slash-header .slash {
margin: 0 10px;
transform: rotate(-45deg);
}
```
阅读全文