el-table表格自动循环向上滚动鼠标放上去停止,移开恢复

本文主要是介绍el-table表格自动循环向上滚动鼠标放上去停止,移开恢复,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

排序的图标是两个图片,点击向后端发请求带不同的参数 

<template><div style="height: 100%" class="table-content"><div :style="{ 'position': 'absolute', 'z-index': '9999', 'right': '3%', 'top': 0 }":class="`tagBtn bg${centerKey}`"><div class="item" @click="centerKey = 1"></div><div class="item" @click="centerKey = 2"></div></div><div style=" flex:1;height:0px" class="table-info" id="table"><el-table class="temp-table" ref="tableRef" @current-change="currChange" highlight-current-row:row-class-name="tableRowClassName" :data="tableData" size="mini" height="100%" :key="rank"@cell-mouse-enter="handleMouseOver" @cell-mouse-leave="handleMouseLeave"><el-table-column prop="rank" label="排名" align="center" min-width="80" show-overflow-tooltip><template #header><div style="display: flex;flex-direction: row;align-items: center;justify-content: center;"@click="sortChange"><span>排名</span><span style="cursor: pointer;" v-if="show"><imgsrc="../../../assets/imgs/jiangxu.png" /></span><span style="cursor: pointer;" v-if="!show"><imgsrc="../../../assets/imgs/shengxu.png" /></span></div></template><template #default="scope"><span>{{ scope.row.rank }}</span></template></el-table-column><el-table-column label="xx" prop="COMMUNITYNAME" min-width="120" align="left" show-overflow-tooltip></el-table-column><el-table-column label="xxx" prop="AVGTEMP" min-width="85" align="center" show-overflow-tooltip></el-table-column><el-table-column v-if="centerKey === 1" label="xxx" prop="LOWTEMP" min-width="120" align="center"show-overflow-tooltip></el-table-column><el-table-column v-else label="xxx" prop="OVERTEMP" min-width="120" align="center" show-overflow-tooltip></el-table-column></el-table></div></div></Card>
</template><script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/modules/app'
import { listRoomTempRange } from '@/api/Tou/index.ts'export default defineComponent({components: {},props: {intervalTime: {type: Number,default: 20}},setup(props) {// storeconst appStore = useAppStore()const router = useRouter()const state = reactive({tableRef: null,tableData: [],centerKey: 1,type: 0,timer: null,distance: 0,mouserEnter: false, //用来标识鼠标是否在表格区域(防止请求接口之后,鼠标还指示在图表上)mouseScroll: false,currdata: null,show: true,}) as anyconst methods = {sortChange() {state.show = !state.showif (state.show === true) {state.type = 0 // 0降序methods.getData(state.type);} else {state.type = 1 // 1升序methods.getData(state.type);}},getData(type: number) {let params = {temporder: type == 0 ? 0 : 1, // 1升序 0降序}listRoomTempRange(params).then(res => {// 处理成功的响应// 返回的数据顺序是后端处理好的,这里只需要按顺序添加编号即可            const data = res?.data.map((item: any, index: number) => {return {...item,rank: index + 1,}})methods.initData(data);}).catch(error => {// 处理错误的响应console.error(error);});},// 设置行颜色tableRowClassName({ row, rowIndex }) {if (rowIndex % 2 == 0) {return "warning-row";} else if (rowIndex % 2 == 1) {return "success-row";}return "";},// 切换选项抛出事件currChange(val, i) {state.currdata = val;},initData(data) {//根据行数判断表格是否溢出,溢出滚动,否则不滚动if (data.length > 9) {state.tableData = [...data, ...data];} else {state.tableData = data;}//如果当前有选中的话,则请求接口之后高亮此项if (state.currdata) {let index = state.tableData.filter((r) => {if (r.COMMUNITYID == state.currdata.COMMUNITYID) {return r;}});state.tableRef.setCurrentRow(index[0]);} else {// 初始时是默认选中第一条state.tableRef.setCurrentRow(state.tableData[0]);}nextTick(() => {state.tableRef && state.tableRef.doLayout(); //解决表格错位if (data.length > 9 && !state.mouserEnter) {methods.scroll();methods.mouseWheel();}});},// 无缝滚动scroll() {window.clearInterval(state.timer);state.mouserEnter = true;const tableEl = document.getElementById('table')const bodyContent = tableEl.getElementsByClassName('el-table__body')[0];const bodyWrapperHeight = tableEl.getElementsByClassName('el-table__body-wrapper')[0].clientHeight;const bodyContentHeight = tableEl.getElementsByClassName('el-table__body')[0].clientHeight;if (bodyWrapperHeight < bodyContentHeight) {state.timer = setInterval(() => {state.distance -= 1;bodyContent.style.top = `${state.distance % bodyContent.offsetHeight / 2}px`;}, 20);}},// 滚轮滚动mouseWheel() {state.mouserEnter = true;const tableEl = document.getElementById('table')const bodyWrapper = tableEl.getElementsByClassName('el-table__body-wrapper')[0];const bodyContent = tableEl.getElementsByClassName('el-table__body')[0];bodyWrapper.addEventListener('mousewheel', (e) => {// 滚动table的时候,禁止屏幕滚动e.preventDefault();state.distance -= e.deltaY / 2;if (state.distance > 0) {state.distance = 0;}if (bodyContent.offsetHeight > bodyWrapper.offsetHeight) {bodyContent.style.top = `${state.distance % bodyContent.offsetHeight / 2}px`;}}, { passive: false })},// 鼠标移入停止滚动handleMouseOver() {window.clearInterval(state.timer);state.mouserEnter = true;},// 鼠标移出,恢复滚动handleMouseLeave() {methods.scroll();},}const timer2 = ref(null)onMounted(() => {methods.getData(0)timer2.value = setInterval(() => {methods.getData(state.type)}, 1000 * props.intervalTime);})onUnmounted(() => {clearInterval(timer2.value);})return {...toRefs(state),...methods,}}
})
</script><style lang="less" scoped>
.card-info {position: relative;
}.table-content {width: 100%;height: 100%;display: flex;flex-direction: column;overflow: hidden;padding: 3%;.table-info {height: 0;flex: 1;border-radius: 6px;overflow: hidden;}.tagBtn {width: 129px;height: 23px;background: url(../../../assets/imgs/upToPar1.png) no-repeat;background-size: 100% 100%;display: flex;flex-direction: row;justify-content: center;&.bg2 {background: url(../../../assets/imgs/upToPar2.png) no-repeat;background-size: 100% 100%;}&>.item {width: 65px;cursor: pointer;&:last-child {margin-left: 4px;}}}
}.el-table {border-radius: 6px;
}:deep(.el-table td.el-table__cell div) {padding-left: 8px !important;padding-right: 8px !important;font-size: 12px;font-family: MicrosoftYaHei;color: #C0D7FB;line-height: 16px;
}:deep(.el-table th>.cell) {text-align: center;
}::v-deep .el-table .warning-row {height: 36px;background: #070C33;// background: linear-gradient(90deg, rgba(0, 15, 35, 0) 0%, #000E23 100%);
}::v-deep .el-table .success-row {height: 36px;background: #0A1749;// background: rgba(20, 57, 140, 0.34);
}::v-deep .el-table .current-row {height: 36px;background: #043A90;
}::v-deep .el-table--scrollable-y .el-table__body-wrapper {overflow: hidden;
}::v-deep .el-table__body {position: relative;min-height: 100%;width: 100%;
}// 表头样式
.el-table .el-table__header th {background: rgba(26, 131, 255, 0.29);
}:deep(.el-table__header) {height: 46px !important;
}:deep(.el-table thead th.el-table__cell ) {color: #FFFFFF !important;font-size: 14px !important;
}::v-deep .el-table_3_column_11 .is-left .is-leaf {border-radius: 6px 0px 0px 6px;
}:deep(.el-table__body tr.current-row>td) {color: #FFFFFF !important;background-color: #0073FF !important;
}
</style>

 

这篇关于el-table表格自动循环向上滚动鼠标放上去停止,移开恢复的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/556840

相关文章

通过ibd文件恢复MySql数据的操作方法

《通过ibd文件恢复MySql数据的操作方法》文章介绍通过.ibd文件恢复MySQL数据的过程,包括知道表结构和不知道表结构两种情况,对于知道表结构的情况,可以直接将.ibd文件复制到新的数据库目录并... 目录第一种情况:知道表结构第二种情况:不知道表结构总结今天干了一件大事,安装1Panel导致原来服务

Python Excel实现自动添加编号

《PythonExcel实现自动添加编号》这篇文章主要为大家详细介绍了如何使用Python在Excel中实现自动添加编号效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、背景介绍2、库的安装3、核心代码4、完整代码1、背景介绍简单的说,就是在Excel中有一列h=会有重复

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Java嵌套for循环优化方案分享

《Java嵌套for循环优化方案分享》介绍了Java中嵌套for循环的优化方法,包括减少循环次数、合并循环、使用更高效的数据结构、并行处理、预处理和缓存、算法优化、尽量减少对象创建以及本地变量优化,通... 目录Java 嵌套 for 循环优化方案1. 减少循环次数2. 合并循环3. 使用更高效的数据结构4

使用Python实现表格字段智能去重

《使用Python实现表格字段智能去重》在数据分析和处理过程中,数据清洗是一个至关重要的步骤,其中字段去重是一个常见且关键的任务,下面我们看看如何使用Python进行表格字段智能去重吧... 目录一、引言二、数据重复问题的常见场景与影响三、python在数据清洗中的优势四、基于Python的表格字段智能去重

Springboot的自动配置是什么及注意事项

《Springboot的自动配置是什么及注意事项》SpringBoot的自动配置(Auto-configuration)是指框架根据项目的依赖和应用程序的环境自动配置Spring应用上下文中的Bean... 目录核心概念:自动配置的关键特点:自动配置工作原理:示例:需要注意的点1.默认配置可能不适合所有场景

MySQL InnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据

《MySQLInnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据》mysql的ibdata文件被误删、被恶意修改,没有从库和备份数据的情况下的数据恢复,不能保证数据库所有表数据... 参考:mysql Innodb表空间卸载、迁移、装载的使用方法注意!此方法只适用于innodb_fi

mysql通过frm和ibd文件恢复表_mysql5.7根据.frm和.ibd文件恢复表结构和数据

《mysql通过frm和ibd文件恢复表_mysql5.7根据.frm和.ibd文件恢复表结构和数据》文章主要介绍了如何从.frm和.ibd文件恢复MySQLInnoDB表结构和数据,需要的朋友可以参... 目录一、恢复表结构二、恢复表数据补充方法一、恢复表结构(从 .frm 文件)方法 1:使用 mysq

mysql8.0无备份通过idb文件恢复数据的方法、idb文件修复和tablespace id不一致处理

《mysql8.0无备份通过idb文件恢复数据的方法、idb文件修复和tablespaceid不一致处理》文章描述了公司服务器断电后数据库故障的过程,作者通过查看错误日志、重新初始化数据目录、恢复备... 周末突然接到一位一年多没联系的妹妹打来电话,“刘哥,快来救救我”,我脑海瞬间冒出妙瓦底,电信火苲马扁.

Java中实现订单超时自动取消功能(最新推荐)

《Java中实现订单超时自动取消功能(最新推荐)》本文介绍了Java中实现订单超时自动取消功能的几种方法,包括定时任务、JDK延迟队列、Redis过期监听、Redisson分布式延迟队列、Rocket... 目录1、定时任务2、JDK延迟队列 DelayQueue(1)定义实现Delayed接口的实体类 (