Element UI 之table表格样式

需求：

鼠标移入：

实现：

<template>
  <el-table
    :data="tableData"
    style="width: 800px"
    height="440px"
    :header-cell-style="{
      background: '#1C2E45',
      height: '40px',
      padding: '0',
      color: '#a0b2d3',
    }"
    :cell-style="cellStyle"
    class="table-list"
  >
    <el-table-column
      label="序号"
      align="center"
      header-align="center"
      :show-overflow-tooltip="true"
      width="100"
    >
      <template scope="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="time"
      label="日期"
      align="center"
      header-align="center"
      :show-overflow-tooltip="true"
      width="100"
    >
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
      align="center"
      header-align="center"
      :show-overflow-tooltip="true"
      width="100"
    >
    </el-table-column>
    <el-table-column
      prop="briefIntroduction"
      label="简介"
      align="center"
      header-align="center"
      :show-overflow-tooltip="true"
      width="100"
    >
    </el-table-column>
    <el-table-column
      prop="author"
      label="作者"
      align="center"
      header-align="center"
      :show-overflow-tooltip="true"
      width="100"
    >
    </el-table-column>
    <el-table-column
      prop="star"
      label="星级"
      align="center"
      header-align="center"
      :show-overflow-tooltip="true"
      width="100"
    >
    </el-table-column>
    <el-table-column
      prop="reading"
      label="阅读量"
      align="center"
      header-align="center"
      :show-overflow-tooltip="true"
      width="100"
    >
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      align="center"
      header-align="center"
      :show-overflow-tooltip="true"
      width="100"
    >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          time: "2012-02-10 02:25:28",
          title: "实没风越花九",
          briefIntroduction: "论问严复周较选小提。",
          author: "朱娜",
          star: "★★★",
          reading: 2044,
          address: "湖南省 衡阳市 衡南县",
        },
        {
          id: 2,
          time: "1991-02-15 21:36:16",
          title: "员通了",
          briefIntroduction: "说六原红论提个。",
          author: "蒋杰",
          star: "★★★★★",
          reading: 950,
          address: "海南省 三亚市 -",
        },
        {
          id: 3,
          time: "1998-08-20 11:15:58",
          title: "器来此只小",
          briefIntroduction: "么立院部油起确带属然状装。",
          author: "杨敏",
          star: "★★★★",
          reading: 827,
          address: "江西省 萍乡市 安源区",
        },
        {
          id: 4,
          time: "2016-08-04 08:39:45",
          title: "听期务半",
          briefIntroduction: "名直维发现。",
          author: "杨芳",
          star: "★★",
          reading: 2640,
          address: "福建省 龙岩市 其它区",
        },
        {
          id: 5,
          time: "1990-10-21 19:32:04",
          title: "北由给实",
          briefIntroduction: "真产经门克无百外。",
          author: "程军",
          star: "★★★",
          reading: 1290,
          address: "黑龙江省 齐齐哈尔市 富裕县",
        },
        {
          id: 6,
          time: "2001-07-26 15:50:19",
          title: "热革形",
          briefIntroduction: "转人新加农数位那调这高。",
          author: "康明",
          star: "★",
          reading: 3885,
          address: "辽宁省 铁岭市 昌图县",
        },
        {
          id: 7,
          time: "1989-10-30 11:48:07",
          title: "容发号政及带",
          briefIntroduction: "名见西平东月。",
          author: "石秀英",
          star: "★★",
          reading: 2637,
          address: "湖北省 孝感市 安陆市",
        },
        {
          id: 8,
          time: "2002-05-12 10:03:35",
          title: "接开统按斯的南",
          briefIntroduction: "压解能放质斯设。",
          author: "郭刚",
          star: "★★",
          reading: 3224,
          address: "福建省 龙岩市 新罗区",
        },
        {
          id: 9,
          time: "2003-04-24 18:29:43",
          title: "共因证会",
          briefIntroduction: "强须计克内斯那得深适起位并主适。",
          author: "尹伟",
          star: "★★",
          reading: 4824,
          address: "青海省 玉树藏族自治州 称多县",
        },
        {
          id: 10,
          time: "2004-07-25 16:34:24",
          title: "来许路示",
          briefIntroduction: "参观次儿实和天第头酸都还济。",
          author: "黎敏",
          star: "★★★",
          reading: 3097,
          address: "辽宁省 铁岭市 其它区",
        },
        {
          id: 11,
          time: "1996-06-08 23:53:39",
          title: "工水元器",
          briefIntroduction: "非六起商地战算。",
          author: "傅杰",
          star: "★★★",
          reading: 2868,
          address: "山东省 莱芜市 其它区",
        },
        {
          id: 12,
          time: "2013-03-28 02:05:10",
          title: "状海别组织能",
          briefIntroduction: "后但三选群界界种同称机压调。",
          author: "雷敏",
          star: "★★★",
          reading: 3717,
          address: "浙江省 衢州市 龙游县",
        },
        {
          id: 13,
          time: "1986-11-18 11:25:24",
          title: "义海件上观",
          briefIntroduction: "象从组员东外转律素。",
          author: "林军",
          star: "★",
          reading: 2383,
          address: "湖南省 郴州市 苏仙区",
        },
        {
          id: 14,
          time: "1991-02-08 04:22:59",
          title: "达劳那精多",
          briefIntroduction: "到包族太商记路看龙队而。",
          author: "姜平",
          star: "★★",
          reading: 2627,
          address: "江西省 抚州市 资溪县",
        },
        {
          id: 15,
          time: "2021-01-05 23:07:45",
          title: "使情率近资管",
          briefIntroduction: "于满角命设元声感带思。",
          author: "赖超",
          star: "★★★★★",
          reading: 368,
          address: "澳门特别行政区 离岛 -",
        },
        {
          id: 16,
          time: "2014-02-28 09:55:56",
          title: "管传月转保",
          briefIntroduction: "做果求住流完代口样开达人类叫。",
          author: "罗娜",
          star: "★★★★",
          reading: 860,
          address: "香港特别行政区 新界 大埔区",
        },
        {
          id: 17,
          time: "2014-04-22 21:30:24",
          title: "离完展毛队党形",
          briefIntroduction: "照农者不数口。",
          author: "卢霞",
          star: "★★",
          reading: 3326,
          address: "内蒙古自治区 赤峰市 翁牛特旗",
        },
        {
          id: 18,
          time: "1995-10-26 12:56:25",
          title: "么地才律精斯",
          briefIntroduction: "为前起反表有历立者以因多道场技。",
          author: "邱明",
          star: "★★★★",
          reading: 1595,
          address: "广西壮族自治区 防城港市 防城区",
        },
        {
          id: 19,
          time: "1983-01-04 21:16:20",
          title: "半了受两",
          briefIntroduction: "片期但先认就资流上他去道界。",
          author: "胡军",
          star: "★★★★",
          reading: 2379,
          address: "吉林省 四平市 双辽市",
        },
        {
          id: 20,
          time: "2013-06-26 22:52:17",
          title: "素记而将而",
          briefIntroduction: "来高起存等。",
          author: "周霞",
          star: "★★★★",
          reading: 1662,
          address: "江苏省 盐城市 盐都区",
        },
      ],
    };
  },
  methods: {
    // 表格隔行换色
    cellStyle(row, column, rowIndex, columnIndex) {
      if (row.rowIndex % 2 == 0) {
        return "background: #12243C;"; //双数行
      } else {
        return " background: #1C2E45;"; //单数行
      }
    },
  },
};
</script>
<style lang="scss">
.table-list {
  &.el-table {
    font-size: 20px;
    width: 100%;
    height: 100%;
    background: #192a3f !important;

    &::before {
      height: 0;
    }
    .is-leaf {
      border: none;
    }
    thead {
      border-bottom: 2px solid rgba(255, 255, 255, 1);
    }
    th {
      background: transparent;
      border-bottom: none;
      .cell {
        font-weight: bold;
        color: #a0b2d3;
      }
    }
    tr {
      height: 40px; //
      &.el-table__row:hover {
        td {
          background: #ebeef5 !important; //划过 背景颜色
        }
      }
    }
    td {
      background: transparent;
      border-bottom: none;
      padding: 0;
      .cell {
        overflow: hidden;
        font-weight: bold;
        color: #a0b2d3;
      }
    }

    // 滚动条宽高
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    // 滚动条的滑块
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: rgb(75, 137, 212);
      border-radius: 5px;
    }
    // 滚动条背景颜色
    .el-table__body-wrapper::-webkit-scrollbar-track-piece {
      background-color: #1c2e45;
    }
  }
}

.el-tooltip__popper.is-dark {
  // table 提示框样式
  min-width: fit-content !important;
  background: #192a3f !important;
  color: #a0b2d3 !important;
  font-size: 20px;
}
</style>