el-table 背景色 字体颜色 hover时颜色 滚动条样式 不同行不同颜色

效果:

 

<template>
  <div v-if="showOrHide && arr.length > 0" class="staffInfo">
    <div v-for="(item, index) in arr" :key="index">
      <el-popover
        placement="right"
        width="600"
        trigger="click"
        popper-class="tanchuang"
      >
        <!-- <div>
          <el-row :gutter="20">
            <el-col :span="12" class="pl15">标题</el-col>
            <el-col :span="6" class="textCenter">数据来源</el-col>
            <el-col :span="6" class="textCenter">参训率(%)</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" class="textCenter">数据来源</el-col>
            <el-col :span="6" class="textCenter">数据来源</el-col>
            <el-col :span="6" class="textCenter">数据来源 </el-col>
          </el-row>
        </div> -->

        <el-table
          :data="item.list"
          max-height="500px"
          border
          class="tableClass"
          header-row-class-name="header-row"
          header-cell-class-name="header-cell"
          :cell-style="tableCellStyle"
        >
          <el-table-column align="center" prop="title" label="标题">
          </el-table-column>
          <el-table-column
            align="center"
            prop="origin"
            label="数据来源"
            width="140"
          >
          </el-table-column>

          <el-table-column align="center" width="100" prop="file" label="文件">
            <template slot-scope="scope">
              <a :href="baseUrl + scope.row.file" target="_blank" style="color:rgba(0,0,255,0.8)">查看</a>
            </template>
          </el-table-column>
        </el-table>

        <div
          slot="reference"
          class="card"
          @click="handle"
          style="cursor: pointer;"
          :style="[
            { background: item.bgcolor },
            { width: item.size + 'px' },
            { height: item.size + 'px' },
            { top: item.top },
            { left: item.left },
            { 'box-shadow': item.shadow },
            { 'animation-delay': item.delay },
          ]"
        >
          <div>{
  { item.value }}</div>
          <div>
            <div v-show="item.name !== '八项规定'">{
  { item.name }}</div>
            <div v-show="item.name === '八项规定'" style="margin-bottom: -14%;">
              <div>贯彻八项规定</div>
              <div>报告</div>
            </div>