Element-Ui表格样式修改，表头，表单，高亮背景等最新方法！

随便拉一个表格

<el-table
            class="tablebor"
            :header-cell-style="{
              color: '#ffffff',
              borderBottom: 'pink',
              backgroundColor: '#047ab1',
            }"
            :row-style="{
              backgroundColor: '#14344b6d',
              color: '#ffffff',
              borderBottom: 'pink',
            }"
            :data="tableData"
            style="width: 100%; background-color: #085981a5"
          >
            <el-table-column prop="pointName" label="机组名称" align="center">
            </el-table-column>

            <el-table-column
              prop="mid"
              label="机组状态"
              min-width="100"
              align="center"
            >
              <template slot-scope="{ row }">
                <el-switch
                  v-model="row.state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="mid"
              label="闸门开度"
              min-width="100"
              align="center"
            >
              <template>
                <el-select v-model="selval" placeholder="请选择">
                  <el-option
                    v-for="(item, i) in options"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="mid"
              label="调度模式"
              min-width="100"
              align="center"
            >
              <template>
                <el-select v-model="selval" placeholder="请选择">
                  <el-option
                    v-for="(item, i) in options"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="mid"
              label="调度设置"
              min-width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small"
                >
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>

这是从项目随便搬的一个表格组件，在这个表格同级的地方加入这个样式即可修改高亮

.scheduling {
  width: 100%;
  height: 55%;
  //修改高亮颜色
  .el-table tbody tr:hover > td {
    background-color: #065b759e !important;
    border-top: 2px solid #22b0e8;
    border-bottom: 2px solid #22b0e8;
    border-left: none;
    border-right: none;
  }
}

修改表头，表单颜色 利用 Element 最新提供的方法即可！

//表头修改
:header-cell-style="{
  color: '#ffffff',
  borderBottom: 'pink',
  backgroundColor: '#047ab1',
}"
//表单修改
:row-style="{
  backgroundColor: '#14344b6d',
  color: '#ffffff',
  borderBottom: 'pink',
}"

注：注意删掉scoped属性否则无法穿透样式获取不到类名！！！

修改完成！！！

欢迎点赞收藏，留言讨论！！！🙏🙏🙏🙏🙏🙏