效果展示
代码
<template><div class="page_body_item_body" @mouseenter="stopScroll" @mouseleave="scroll(false)"><ele-tableclass="eleTable":table-options="options":columns-options="columns":show-fixed-control="false":show-pagination="false"/></div>
</template><script>
import { pageVoiceAlertByJh } from '@/api/video-api.js'export default {name: 'Home',components: {},data() {return {tableData: [],tableMaxHeight: 400,tableScrollTimer: null}},computed: {options() {return {data: this.tableData || [],maxHeight: this.tableMaxHeight}},columns() {return [{type: 'index',label: '序号'},{prop: 'xm',label: '警员姓名','show-overflow-tooltip': true},{prop: 'jh',label: '警号','show-overflow-tooltip': true},{prop: 'bmmc',label: '所在单位','show-overflow-tooltip': true},{prop: 'zfycCount',label: '执法异常','show-overflow-tooltip': true},{prop: 'sgycCount',label: '事故处理异常','show-overflow-tooltip': true,minWidth: 100},{prop: 'sumCount',label: '总异常','show-overflow-tooltip': true}]}},created() {this.pageVoiceAlertByJh()},mounted() {this.$nextTick(() => {this.tableMaxHeight = this.getTableHeight()})window.addEventListener('resize', () => {this.tableMaxHeight = this.getTableHeight()})},methods: {pageVoiceAlertByJh() {pageVoiceAlertByJh({kssj: '2024-01-01',jssj: '2024-12-01'}).then((res) => {this.$common.CheckCode(res, null, () => {this.tableData = res.data?.rows || []this.$nextTick(() => {this.scroll(true)})})})},stopScroll() {clearInterval(this.tableScrollTimer)this.tableScrollTimer = null},scroll(isFetchData = false) {this.stopScroll()const body_content = document.querySelector('.el-table__body-wrapper')const body_content_heigh = body_content?.offsetHeightconst body = document.querySelector('.el-table__body')const body_heigh = body?.offsetHeightisFetchData && (body_content.scrollTop = 0)if (body_heigh > body_content_heigh) {const cha = body_heigh - body_content_heighthis.tableScrollTimer = setInterval(() => {if (body_content.scrollTop >= cha) {body_content.scrollTop = 0} else body_content.scrollTop += 1}, 50)}},getTableHeight() {const tableContainer = document.querySelector('.table')const tableHeader = document.querySelector('.table page_body_item_header')const tableContainerHeight = (tableContainer && tableContainer.offsetHeight) || 0const tableHeaderHeight = (tableHeader && tableHeader.offsetHeight) || 0return tableContainerHeight - tableHeaderHeight - 50 - 2}}
}
</script><style lang='scss' scoped>
</style>