组件a.vue代码
<el-table>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="table-expand">
<el-form-item label="名称">
<span>{{ props.row.name}}</span>
</el-form-item>
.........
</el-form>
</template>
</el-table-column>
<el-table-column
label="名称"
prop="name"
/>
<el-table-column
label="状态"
prop="status"
class-name="j-status"
>
<template slot-scope="scope">
<i
:class="el-icon-error"
/>
</template>
</el-table-column>
</el-table>
浏览器渲染的结果:
<div data-v-63e05c79="">
<div data-v-63e05c79="" class="el-table el-table--fit el-table--fluid-height el-table--enable-row-hover el-table--enable-row-transition el-table--mini" style="width: 100%; max-height: 210px;">
......
<tr>
<td rowspan="1" colspan="1" class="el-table_28_column_167 j-status">
<div class="cell">
<i data-v-63e05c79="" class="el-icon-error"></i>
</div>
</td>
</tr>
......
<tr>
<td colspan="7" class="el-table__expanded-cell">
<form data-v-63e05c79="" class="el-form table-expand el-form--label-left ....">
<div data-v-63e05c79="" class="el-form-item">
<label class="el-form-item__label">名称</label>
<div class="el-form-item__content">
<span data-v-63e05c79="">xxx</span>
</div>
</div>
</form>
</td>
</tr>
......
</div>
</div
在组件 a.vue中测试如下样式
<style scoped>
/*不能生效的 */
.table-expand label {
width: 90px;
color: #99a9bf;
}
.el-table .j-status .cell{
text-align: center;
}
/*不能生效的 */
/*能生效的 */
.table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
.table-expand >>> label {
width: 90px;
color: #99a9bf;
}
.el-table >>> .job-status .cell{
text-align: center;
}
.job-status i{
font-size: 20px;
}
/*能生效的 */
</style>
scoped的规则大概如下(从浏览器渲染的结果看):
为方便说明,css类所在的元素中含有data-v-*的称为vclass或vele,不含的称为class或ele
- .vclass .vclass或vele的规则是有效的
- .vclass >>> class或ele的规则是有效的
- .class或ele .vclass或vele的规则是有效的