el-table去掉鼠标悬停的效果，隐藏表头，设置行高，每行显示不同的颜色

1、去掉悬停效果

添加样式

/* 去掉鼠标悬浮效果 */
.el-table tbody tr:hover > td {
  background-color: transparent !important
}

 2、隐藏表头

el-table 添加属性 :show-header

:show-header="false"

3、设置行高

<el-table class="custom-table" :data="talentDemandData"  style="margin:10px 2px; padding: 17px 0;position: absolute;left: 10px;top:220px;"
                      :show-header="false"
                      :cell-style="{'font-size':'14px','font-family':'Source Han Sans CN','font-weight':'500','color':'#A9B9D3','text-align':'center'}"
            >
              <el-table-column prop="" label=""/>
              <el-table-column prop="industryType" label="" width="100px"/>
              <el-table-column prop="percent" label=""/>
              <el-table-column prop="count" label=""/>
            </el-table>

添加样式

.custom-table .el-table__cell{
  padding: 0;
  height: 10px;
}

4、每行显示不同的颜色

<el-table-column label="" align="center" width="40px">
                <template #default="scope">
                  <div :style="{backgroundColor:scope.row.color}" class="talentDemandClass"></div>
                </template>
              </el-table-column>

除了颜色之外的样式写在class中：

.talentDemandClass{
  width: 8px;
  height: 8px;
}

数据：

talentDemandData: [
        {
          "id": 1,
          color: "#7b55d8",
          industryType: "金融类",
          percent: "7%",
          count: 13
        },
        {
          "id": 2,
          color: "#366ccc",
          industryType: "信息技术类",
          percent: "12%",
          count: 21
        }
      ],

效果：

5、el-table表头修改文字或者背景颜色，通过header-row-style设置样式

<template>
    <el-table :header-cell-style="tableHeaderColor" />
</template>
<script>
export default {
    methods: {
        tableHeaderColor ({row, column, rowIndex, columnIndex}) {
          return 'background:    #F5F5F5; color:#000000;';
        }
    }
}
</script>