vue3中elementPlus 表格组件定制化样式时deep无效处理方案

379 阅读1分钟

根据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>

表格的效果就是

1686635585121.png 表格背景是白色的我设置的样式是透明的 只要修改一下将template中只有一个根节点就可以了

1686635767359.png