ElementUI表格table使用JS控制滚动

ElementUI表格table使用JS控制滚动

需求

通过js来控制表格的某一行出现在可视区域中

分析和实现

在ElementUI中,并支持表格table组件的滚动,我这里通过js控制table的scrollTop来实现需求

框架封装好了的组件el-table,然而我们并不能直接获取到table,我通过一步步定位到table在el-table的位置,这里就不再阐述定位过程,直接上结果:

<el-table :data="tableData" 
          :highlight-current-row="true"
          ref="canvasTable"
>
          <el-table-column
	            :key="index"
	            :label="key.remark"
	            :prop="key.name"
	            v-for="(key, index) in columns"
          ></el-table-column>
</el-table>
//bodyWrapper是拆分组件后的table容器
let bodyWrapper = this.$refs.canvasTable.bodyWrapper
// e为行号
if (bodyWrapper.children[0].rows[e]) {
    bodyWrapper.scrollTop = bodyWrapper.children[0].rows[e].offsetTop
}

补充

由于这里是js控制,不能使用css的动画库来产生动画效果,但可以使用一些动画js库进行辅助实现,具体的大家可以自行尝试

Vue 2中,结合Element UI Table组件实现表格的无缝滚动,并且鼠标悬停时不滚动,可以按照以下步骤操作: 1. 首先,确保已经安装了Element UI和Vue,并且在项目中引入这两个库。 2. 使用Element UI的`el-table`组件,它有自带的虚拟滚动功能,可以在大数据量下提高性能。 3. 在`el-table`的属性中启用`scroll`选项,设置横向滚动(`x`)和纵向滚动(`y`)。例如: ```html <el-table :data="tableData" :scroll-y="true" :scroll-x="true"> <!-- 表格列配置 --> </el-table> ``` 4. 要阻止鼠标悬停时的滚动,需要监听`mouseover`事件,当鼠标进入表格外时关闭滚动。你可以使用自定义的`methods`: ```javascript data() { return { isScrolling: false, }; }, methods: { handleMouseEnter(e) { this.isScrolling = false; // 如果需要,也可以清除当前滚动位置 if (this.$refs.table && this.$refs.table.$el) { this.$refs.table.$el.scrollLeft = 0; } }, handleMouseLeave(e) { // 悬浮时间结束后恢复滚动 setTimeout(() => { this.isScrolling = true; }, 100); }, }, mounted() { this.$el.addEventListener('mouseover', this.handleMouseEnter); this.$el.addEventListener('mouseout', this.handleMouseLeave); }, beforeDestroy() { this.$el.removeEventListener('mouseover', this.handleMouseEnter); this.$el.removeEventListener('mouseout', this.handleMouseLeave); }, ``` 5. 当鼠标离开表格区域(`handleMouseLeave`方法中),添加一个定时器,延迟一段时间后再恢复滚动效果(这里设定为100毫秒,可根据需求调整)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值