css中如何设置element ui 表格中 row-key里有树形数据,没有树形数据来个背景颜色
时间: 2024-03-06 17:48:38 浏览: 91
element ui table(表格)实现点击一行展开功能
5星 · 资源好评率100%
要设置Element UI表格中row-key里有树形数据和没有树形数据的背景颜色,你可以使用CSS选择器来选择包含树形数据和不包含树形数据的单元格,并分别设置它们的背景颜色。
以下是一个示例:
```css
.el-table tr.el-table__row:not(.el-table__row--level-0) td.el-table_1_column_1:before {
content: "";
display: inline-block;
margin-right: 4px;
width: 16px;
height: 16px;
vertical-align: middle;
background: url(./tree-icon.png) no-repeat center center;
}
.el-table tr.el-table__row.el-table__row--level-0 td.el-table_1_column_1:before {
content: "";
display: inline-block;
margin-right: 4px;
width: 16px;
height: 16px;
vertical-align: middle;
background: url(./no-tree-icon.png) no-repeat center center;
background-size: 16px 16px;
}
.el-table tr.el-table__row td.el-table_1_column_2 {
background-color: #f5f5f5;
}
```
在这个示例中,我们使用选择器.el-table tr.el-table__row:not(.el-table__row--level-0) td.el-table_1_column_1:before来选择包含树形数据的单元格,并设置其前景图标。然后,我们使用选择器.el-table tr.el-table__row.el-table__row--level-0 td.el-table_1_column_1:before来选择不包含树形数据的单元格,并设置其前景图标。最后,我们使用选择器.el-table tr.el-table__row td.el-table_1_column_2来选择所有单元格中的第二列,并将其背景颜色设置为#f5f5f5。你可以根据需要自己调整样式。请注意,选择器中的类名可能会因Element UI版本而异,你需要根据你的版本进行相应的更改。
阅读全文