el-table el-row设置边框
时间: 2023-08-05 12:05:57 浏览: 1768
`el-row` 并不是 `el-table` 的子组件,因此不能直接在 `el-row` 上设置边框。如果你想给 `el-table` 中的每一行添加边框,可以通过设置 `el-table__row` 类的样式来实现。示例代码如下:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
<style>
.el-table__row {
border-bottom: 1px solid #ebeef5;
}
</style>
```
在上面的代码中,我们通过设置 `.el-table__row` 类的样式来给每一行添加边框。具体来说,我们设置了 `border-bottom` 样式,使每行之间有一条细线作为分割线。你可以根据需要修改样式来实现不同的效果。
如果你只想给表格的第一行或最后一行添加边框,可以使用 `:first-child` 或 `:last-child` 选择器来选择相应的行,例如:
```css
.el-table__row:first-child {
border-top: 1px solid #ebeef5;
}
.el-table__row:last-child {
border-bottom: 1px solid #ebeef5;
}
```
这样,表格的第一行会有一条细线作为上边框,最后一行会有一条细线作为下边框。
阅读全文