elementui单元格中竖线分割两边内容
时间: 2023-07-01 19:06:55 浏览: 120
优雅的elementUI table单元格可编辑实现方法详解
如果你使用的是 Element UI 的表格组件,你可以通过设置 `scoped-slot` 来自定义单元格的内容,并在单元格内容中添加竖线分割线。
例如,你可以这样定义一个包含竖线分割线的单元格内容:
```html
<el-table-column label="姓名">
<template slot-scope="scope">
<div class="cell-content">
<span>{{ scope.row.name }}</span>
<span class="vertical-line"></span>
<span>{{ scope.row.age }}</span>
</div>
</template>
</el-table-column>
```
然后在 CSS 中添加样式来定义分割线的样式:
```css
.cell-content {
display: flex;
align-items: center;
}
.vertical-line {
margin: 0 10px;
border-left: 1px solid #ccc;
height: 16px;
}
```
这样就可以在单元格中添加竖线分割线了。
阅读全文