element table 自动滚动 高度自适应

一 页面代码

    <div class="content">

      <el-table

          class="table"

          id="myTable"

          :max-height="autoHeight"

          :row-class-name="tableRowClassName"

          :data="state.tableData"

          ref="scrollTable"

          :header-cell-style="{ 'text-align': 'center' }"

          :cell-style="{ 'text-align': 'center' }"

      >

        <el-table-column type="index" label="序号" width="60"/>

        <el-table-column prop="policeTime" label="事件时间" show-overflow-tooltip width="170"></el-table-column>

        <el-table-column prop="policeReset" label="事件" show-overflow-tooltip width="80"></el-table-column>

        <el-table-column prop="policeAttributeJson" label="上报内容" show-overflow-tooltip></el-table-column>

      </el-table>

    </div>

二js部分

<script setup lang="ts">

import {onMounted, ref, onBeforeUnmount, reactive,nextTick} from 'vue';

import {useDeviceRecordApi} from "/@/api/record";

const state = reactive({

  tableData: [] as any,

});

const scrollTable = ref()

const scrollTimer = ref()

const autoHeight = ref()

// 表格自动轮播

const autoScroll = (isScroll: any) => {

  const table = scrollTable.value.layout.table.refs

  const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

  //鼠标放上去，停止滚动；移开，继续滚动

  tableWrapper.addEventListener('mouseover', () => {

    isScroll = false

  })

  tableWrapper.addEventListener('mouseout', () => {

    isScroll = true

  })

  scrollTimer.value = setInterval(() => {

    if (isScroll) {

      tableWrapper.scrollTop += 1

      // 到达最后一行时从第一条继续

      if (Math.round(tableWrapper.clientHeight + tableWrapper.scrollTop) >= Math.floor(tableWrapper.scrollHeight - 1)) {

        tableWrapper.scrollTop = 0

      }

    }

  }, 50)

}

const tableRowClassName = ({row, rowIndex}) => {

  if (rowIndex % 2 == 1) {

    return "even-row";

  } else {

    return "odd-row";

  }

}

 const  getHeight=()=> {

      let getHeightFromBottom = (element:any, variableHeight:any) => {

        const elementRect = element.getBoundingClientRect().top;

        const windowHeight = window.innerHeight;

        const elementHeightFromBottom = windowHeight - elementRect;

        const result = elementHeightFromBottom - variableHeight;

        return result;

      }

      const element = document.getElementById('myTable');

      const variableHeight = 50; // 给定的变量高度 一般留于分页器高度

         autoHeight.value =getHeightFromBottom(element, variableHeight);

    }

onBeforeUnmount(() => {

  autoScroll(false)

  window.removeEventListener('resize', getHeight);

})

onMounted(() => {

    // 监听窗口变化，触发高度计算

    window.addEventListener('resize', getHeight);

  autoScroll(true)

})

  // 初始化高度

  nextTick(()=>{

    getHeight()

  })

</script>

三 css部分

<style scoped lang="scss">

.boxall {

  width: 100%;

  height: 47%;

  background-size: 100% 100%;

  padding: 1.5rem 1rem 4rem 1rem;

  .content {

    width: 100%;

    height: 75%;

    font-size: calc(100vw * 28 / 1920);

    padding-top: 0.8rem;

    box-sizing: border-box;

  }

}

 

::v-deep tr {

  &:hover > td {

    // 悬停颜色 上面的不用管

    background-color: #e1f6f6 !important;

    color: #333;

  }

}

::v-deep .el-table {

  --el-table-border-color: none !important;

  --el-table-border: none !important;

  background-color: #3255AE !important;

}

::v-deep .el-table .el-table__header-wrapper th {

  background-color: #3255AE !important;

  color: #fff;

}

::v-deep .even-row {

  background: #18468E !important;

  color: #fff;

}

::v-deep .odd-row {

  background: #265CA5 !important;

  color: #fff;

}

::v-deep .el-table th.gutter {

  display: none !important;

  width: 0;

}

::v-deep .el-table__header-wrapper {

  background-color: #3255AE !important;

}

 

::v-deep .el-table colgroup col[name="gutter"] {

  display: none;

  width: 0;

}

::v-deep ::-webkit-scrollbar {

  display: none;

  width: 6px;

  height: 8px;

  background-color: #ebeef5;

}

::v-deep ::-webkit-scrollbar-thumb {

  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

  // background-color: linear-gradient(to right, #a3f0af, #fefefe);

}

::v-deep ::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  border-radius: 3px;

  background: rgba(255, 255, 255, 1);

}

</style>