elementui单元格中竖线分割
时间: 2023-07-01 22:06:54 浏览: 164
可以通过自定义单元格的样式来实现竖线分割。具体步骤如下:
1. 在表格组件中设置 `cell-class-name` 属性,将其值设为自定义的单元格样式名,例如 `my-cell-class`。
```html
<el-table :data="tableData" cell-class-name="my-cell-class">
<!-- 表格列定义 -->
</el-table>
```
2. 在样式表中定义 `my-cell-class` 样式,并设置 `border-right` 属性。
```css
.my-cell-class {
border-right: 1px solid #ebeef5;
}
```
这样就可以在每个单元格的右侧添加一条竖线分割了。如果需要在表格的首尾列也添加竖线分割,可以使用 `::before` 和 `::after` 伪元素来实现。例如:
```css
.my-cell-class::before {
content: '';
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
margin-right: 10px;
border-right: 1px solid #ebeef5;
}
.my-cell-class:last-child::after {
content: '';
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
margin-left: 10px;
border-left: 1px solid #ebeef5;
}
```
注意:样式中的 `margin-right` 和 `margin-left` 属性值需要根据实际情况进行调整,以保证竖线分割的位置和表格的单元格对齐。
阅读全文