el-table自动滚动&el-table样式&鼠标悬停&隔行换色

<template>
  <div style="  width:800px;
  height: 250px;">
    <el-table
        class="my-el-table"
        :data="PushOpenResource"
        ref="tableTemp"
        @cell-mouse-enter="mouseEnter"
        @cell-mouse-leave="mouseLeave"
        width="100%"
        height="250"
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{color:'rgb(159,172,184)',background:'rgb(24,75,120)',textAlign:'center'}"
        style="z-index: 998;background-color: rgba(6,49,106,0.93);overflow-x:hidden;border: 1px solid #1b1b1b;border-color: #191919;"
    >
      <el-table-column label="序号" align="center" width="55" prop="xh" type="index">
      </el-table-column>
      <el-table-column
          prop="name"
          label="问题类型"
      ></el-table-column>
      <el-table-column
          prop="value"
          label="投诉量(件)"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableInterval: null,
      PushOpenResource: [{
        name: '网络不正当竞争',
        value: 1000,
      }, {
        name: '侵犯人格尊严',
        value: 800,
      }, {
        name: '经营者拒不履行合法约定',
        value: 300,
      }, {
        name: '冒充合法产品',
        value: 400,
      },
        {
          name: '网络不正当竞争1',
          value: 1200,
        }, {
          name: '侵犯人格尊严2',
          value: 400,
        }, {
          name: '经营者拒不履行合法约定3',
          value: 300,
        }, {
          name: '冒充合法产品4',
          value: 400,
        }],
    }
  },
  mounted() {
    this.scrollTable()
  },
  methods: {
//鼠标移入单元格事件
    mouseEnter(row) {
      console.log("鼠标移入单元格事件======>")
      clearInterval(this.tableInterval);
    },
    //鼠标移出单元格事件
    mouseLeave(row) {
      console.log("鼠标移入单元格事件======>")
      this.scrollTable();
    },
    // 滚动
    scrollTable() {
      const table = this.$refs.tableTemp
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.tableInterval = setInterval(() => {
        console.log("divData=====>")
        // 元素自增距离顶部1像素
        divData.scrollTop += 5
        // console.log("divData===>", divData)
        console.log("scrollTop===>", divData.scrollTop)
        console.log("clientHeight===>", divData.clientHeight)
        console.log("scrollHeight===>", divData.scrollHeight)
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop+1 >= divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0
        }
      }, 100)


    },
  }

}
</script>

<style scoped>

.el-table--border th.gutter:last-of-type {
  border: 1px solid #717172;
  border-left: none;
}

.el-table--border, .el-table--group {
  border: none;
}

.my-el-table th {
  border: none;
}


.my-el-table td,
.my-el-table th.is-leaf {
  border: none;
}



.my-el-table thead tr th.is-leaf {
  border-bottom: 1px solid #171414;
  border-right: none;
}

/*heard上面的白边*/
/deep/ .has-gutter .gutter {
  display: none !important;
}


/*去掉最下面一行*/
.el-table::before {
  height: 0px;
}

/*// 滚动条的宽度*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  /*width: 6px; // 横向滚动条*/
  /*height: 6px;*/
  width: 20px;
  float: left;
  /*left: 1px;*/
}

/*// 滚动条的滑块*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(10, 87, 130, 0.76);
  border-radius: 1px;
  width: 3px;
}

/*// 滚动条样式*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: rgba(6, 53, 112, 0.24);
  width: 5px;
}

/*// 当表格有纵向滚动条时*/
::v-deep .el-table--scrollable-y .el-table__fixed-right {
  right: 7px !important;
}

::v-deep .el-table__fixed, .el-table__fixed-right {
  height: calc(100% - 8px) !important;
  right: 8px !important;
}



/*去掉底部白边*/
/deep/ .el-table_body-wrapper{

  height: calc(100% - 39px) !important;

}

.table-wrapper /deep/ .el-table--fit{
  padding: 20px;
}
.table-wrapper /deep/  .el-table, .el-table__expanded-cell {
  background-color: transparent;
}


/*隔行换色 start*/
/*//表格内容颜色*/
  ::v-deep .el-table__body tbody tr:nth-child(odd) {
    color: white;
    /*text-align: center;*/
    background-color: rgba(23, 57, 108, 0.86);
  }
::v-deep .el-table__body tbody tr:nth-child(even) td {
  color: white;
  /*text-align: center;*/
  background-color: #0580b6;
}
/*隔行换色 end*/


/*// 鼠标经过颜色改为粉红色*/
/*// 鼠标经过颜色改为粉红色*/
::v-deep  .el-table__body tr:hover>td{

     background-color: rgba(56, 179, 220, 0.71) !important;

   }



</style>