表格监听滑动

<template>
  <div class="table_wrap" ref="trRef">
    <div class="shadow" v-if="isShadowShow"></div>
    <table ref="tableRef">
      <thead>
      <tr>
        <th>序号</th>
        <th>栏目1</th>
        <th>栏目2</th>
        <th>栏目3</th>
        <th>栏目4</th>
        <th>栏目2</th>
        <th>栏目3</th>
        <th>栏目4</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>3</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>4</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>5</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>7</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>8</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>9</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>10</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>11</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>12</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>13</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>14</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShadowShow: false
    }
  },
  mounted() {
  // 监听滑动事件
    this.$refs.trRef.addEventListener("scroll", ev => {
      console.log(ev.target.scrollLeft)
      if (ev.target.scrollLeft > 0) {
        this.isShadowShow = true;
      } else {
        this.isShadowShow = false;
      }
    })
  }
}
</script>
<style scoped>
.table_wrap {
  margin: 30px;
  width: 100%;
  height: 100px;
  overflow: auto;
  border-bottom:1px solid #61dafb;
}
.shadow {
  position: absolute;
  left: 127px;
  width: 10px;
  height: 100px;
  background: linear-gradient(to left,#d3959b,#bfe6ba);
  z-index: 200;
}

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #DDDDDD;
}

/* 表格th/td样式 */
td,th {
  width: 150px;
  box-sizing: border-box;
  border-right: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
  /*单元格 超出长度 显示...*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 30px;

}

/* 表头固定 */
thead tr th {
  position: sticky;
  top: 0;
  background: #F4F4F5;
  height: 30px;
}

/* 首列固定/最后一列固定*/
th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  background: #F4F4F5;
  text-align: center;
  right: 0px;
  border-left: 1px solid #DDDDDD ;
  width: 100px;
}

/* 表头首列和最后一列强制最顶层 */
th:first-child {
  z-index: 3;
  /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
  background: #F4F4F5;
}
</style>