elment-table实现行滚动效果

通过获取dom ，来控制表格滚动

html 复制代码

<template>
  <div class="scroll_table">
    <div style="display: inline-block; width: 100%">
      <el-table
        :data="tableData"
        ref="table"
        border
        height="100%"
        highlight-current-row
        style="width:97%;margin-left:18px;margin-top:20px"
        class="table_scroll"
        :header-cell-style="{ 
      background:'rgba(10, 103, 108, 0.5)',color:'#20cbaa',border: '0'}"
      >
        <el-table-column label="过车时间" prop="crossTime" :min-width="200"></el-table-column>
        <el-table-column label="车牌号" prop="plateNo" :min-width="140"></el-table-column>
        <el-table-column label="车辆类型" prop="plateType" :min-width="140"></el-table-column>
        <el-table-column label="车牌类型" prop="vehicleType" :min-width="140"></el-table-column>
        <el-table-column label="车速km/h" prop="speed" :min-width="140"></el-table-column>
      </el-table>
      <!-- </vue-seamless-scroll> -->
    </div>
  </div>
</template>

css 复制代码

.scroll_table {
  height: 100%;
  display: flex;
  ::v-deep .table .el-table__body-wrapper {
    display: none;
  }
  // 重点注意这段样式
  .seamless-warp {
    height: 400px !important;
    overflow: hidden;
    ::v-deep .table_scroll .el-table__header-wrapper {
      display: none;
    }
  }
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0px !important;
}
/deep/.el-table__cell {
  text-align: center !important;
}
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
  border: 0px;
}

/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: rgba(9, 100, 106, 0.2);
  border: 0px;
  color: white;
}
/deep/.el-table th.el-table__cell.is-leaf {
  border: 0px;
}
/deep/.el-table__row {
  border: 0px;
}
/deep/.el-table td.el-table__cell {
  border: 0px;
  border-top: 4px solid rgba(20, 20, 20, 0.5);
}

::v-deep .el-table tbody tr:hover > td {
  background-color: rgba(20, 20, 20, 0.5) !important;
  // color: #FFFFFF;
}

javascript 复制代码

export default {
  // import引入的组件需要注入到对象中才能使用
  props: {
    isFullscreen: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: ()=>[]
    }
  },
  components: {},
  data() {
    // 这里存放数据
    return {
      columns: [
        {
          prop: "time",
          label: "过车时间",
          minWidth: "200",
          sort: true
        },

        {
          prop: "number",
          label: "车牌号",
          minWidth: "140",
          sort: true
        },
        {
          prop: "type",
          label: "车辆类型",
          minWidth: "140",
          sort: true
        },
        {
          prop: "type2",
          label: "车牌类型",
          minWidth: "140",
          sort: true
        },
        {
          prop: "speed",
          label: "车速km/h",
          minWidth: "140",
          sort: true
        }
      ],
      tableList: [
        {
          id: "1",
          time: "2019-09-22 13:34:22",
          number: "张三1",
          type: "待处理",
          speed: 18
        },
        {
          id: "2",
          time: "2019-09-22 13:34:22",
          number: "张三2",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三3",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三4",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三5",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三6",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三7",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三7",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三7",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三7",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三7",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三7",
          type: "待处理",
          speed: 18
        },
        
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三7",
          type: "待处理",
          speed: 18
        },
        {
          id: "3",
          time: "2019-09-22 13:34:22",
          number: "张三7",
          type: "待处理",
          speed: 18
        }
      ]
    };
  },

  // 监控data中的数据变化
  watch: {
    tableData() {
      this.tableList = [];
    }
 
  methods: {
    doLayout() {
      this.$nextTick(() => {
        this.$refs.tables.doLayout();
      });
    },
    getList() {
      checkpointCapture().then(res => {
        this.tableList = res.data.data;
      });
    }
  },

  // 生命周期 - 挂载完成（可以访问DOM元素）---实现滚动的核心js
  mounted() {
    this.$nextTick(() => {
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (
          divData.clientHeight + divData.scrollTop + 1 >
          divData.scrollHeight
        ) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }, 30);
    });
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};