根据scss deep可以对elementPlus 中的表格组件进行定制化样式,但在使用过程中出现deep无效的情况,根据网上查找有些时使用方法错误。但今天这种情况除了使用错误情况下还有一种情况。 vue3可以使用一下编辑方式,支持多个根节点。自此问题出现了。
<template>
<div></div>
<div></div>
</template>
起初我是这样写的
<template>
<el-row :gutter="20">
<el-col :span="6"><Tour></Tour></el-col>
<el-col :span="6" :offset="11">
<Trouble></Trouble>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div style="display: flex">
<el-card class="box-card">
<div class="card-header">
<span>故障分析</span>
</div>
<div class="guzhang">
<div class="numberblue" @click="dialogTable(0)">100个</div>
<div class="sumtext">总数</div>
<div><img src="../../assets/guzhang.png" alt="" /></div>
<div class="itembotoom">
待处理
<span @click="dialogTable(0)" class="numberyellow">60个</span>
</div>
</div>
</el-card>
<el-card class="box-card">
<div class="card-header">
<span>缺陷分析</span>
</div>
<div class="guzhang">
<div class="numberblue" @click="dialogTable(1)">100个</div>
<div class="sumtext">总数</div>
<div><img src="../../assets/quexian.png" alt="" /></div>
<div class="itembotoom">
待处理
<span @click="dialogTable(1)" class="numberyellow">60个</span>
</div>
</div>
</el-card>
</div>
</el-col>
<el-col :span="6" :offset="11">
<TroubleCategory></TroubleCategory>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<Cableevaluation></Cableevaluation>
</el-col>
<el-col :span="6" :offset="11"> <Disposal /></el-col>
</el-row>
<el-dialog
style="background-color: rgba(6, 30, 46, 1)"
v-model="TableVisibleTwo"
:title="dialogTitel"
>
<template #header>
<div class="titleColor">{{ dialogTitel }}</div>
</template>
<DataTables :title="dialogTitel"></DataTables>
</el-dialog>
</template>
表格的效果就是
表格背景是白色的我设置的样式是透明的
只要修改一下将template中只有一个根节点就可以了