vue项目中自定义表格滚动,鼠标移入停止,移出继续滚动
示例图片
自定义表格页面搭建
html
<div class="details">
//表格头部
<div class="details-header flex-c">
<div class="header-item order">序号</div>
<div class="header-item name">名称</div>
<div class="header-item type">
<div class="top">类别</div>
<div class="bottom">
<span class="bottom-item">企业债券</span>
<span class="bottom-item">金融机构贷款</span>
<span class="bottom-item">借托融资租赁</span>
<span class="bottom-item">其他</span>
<span class="bottom-item">合计</span>
</div>
</div>
<div class="header-item balance">
<div class="top">截至上月末金额</div>
<div class="bottom">
<span class="bottom-item">企业债券</span>
<span class="bottom-item">金融机构贷款</span>
<span class="bottom-item">借托融资租赁</span>
<span class="bottom-item">其他</span>
<span class="bottom-item">合计</span>
</div>
</div>
<div class="header-item total">小计</div>
<div class="header-item date">2022年1-4月</div>
<div class="header-item month">5-12月</div>
</div>
//表格内容滚动区域
<div class="details-contents">
//这里要加上ref和鼠标移入移出事件
<div
class="hidden-scroll"
ref="table"
@mouseenter="mouseEnter()"
@mouseleave="mouseLeave()"
>
<div
class="body-item flex-c"
v-for="(item, index) of detailData"
:key="index"
>
<div class="item">{{ index + 1 }}</div>
<div class="item">{{ item.companyname }}</div>
<div class="item">{{ item.con_qyzq }}</div>
<div class="item">{{ item.con_jrjg }}</div>
<div class="item">{{ item.con_xtrz }}</div>
<div class="item">{{ item.con_othe }}</div>
<div class="item">{{ item.con_total }}</div>
<div class="item">{{ item.end_qyzq }}</div>
<div class="item">{{ item.end_jrjg }}</div>
<div class="item">{{ item.end_xtrz }}</div>
<div class="item">{{ item.end_othe }}</div>
<div class="item">{{ item.end_total }}</div>
<div class="item">{{ item.interest_total }}</div>
<div class="item">{{ item.interest_this_month }}</div>
<div class="item">{{ item.interest_next_month }}</div>
</div>
</div>
</div>
</div>
注意 内容滚动区域的 的父盒子要加上ref和移入移出事件,,,上面代码有
<div
class="hidden-scroll"
ref="table"
@mouseenter="mouseEnter()"
@mouseleave="mouseLeave()"
>
css,,,这里我用的less
<style lang="less" scoped>
* {
color: #fff;
}
.flex-c {
display: flex;
align-items: center;
}
.details {
height: 100%;
width: 100%;
padding: 0 10px 0 23px;
.details-header {
width: 100%;
height: 66px;
.header-item {
height: 100%;
line-height: 66px;
border: 1px solid #00e4fe80;
color: #00e4fe;
font-size: 14px;
text-align: center;
}
.order {
width: 74px;
}
.name {
width: 161px;
}
.type,
.balance {
width: 583px;
line-height: normal;
.top,
.bottom {
height: 50%;
line-height: 33px;
width: 100%;
color: #00e4fe;
}
.bottom {
.bottom-item {
color: #00e4fe;
border: 1px solid #00e4fe80;
display: inline-block;
width: 20%;
border-bottom: 0 none;
&:first-child {
border-left: 0 none;
}
&:last-child {
border-right: 0 none;
}
}
}
}
.total,
.date,
.month {
width: 127px;
}
}
.details-contents {
width: 100%;
height: calc(100% - 66px);
margin-top: 4px;
overflow: hidden;
margin-left: -17px;
.hidden-scroll {
width: 100%;
height: 100%;
overflow-y: auto;
margin-left: 17px;
}
.vue-scroll {
width: 100%;
height: 100%;
overflow-y: hidden;
}
.body-item {
height: 32px;
line-height: 32px;
width: 100%;
border: 1px solid #00e4fe10;
background: #172e4f;
&:first-child {
.item {
color: #a6f701;
}
}
&:nth-child(2n + 1) {
border: 1px solid #00e4fe30;
background: #05e9ff16;
}
.item {
width: 115.6px;
text-align: right;
padding-right: 15px;
font-size: 12px;
&:first-child {
width: 73px;
text-align: center;
padding-right: 0px;
}
&:nth-child(2) {
width: 160px;
text-align: left;
padding-left: 20px;
padding-right: 0px;
}
&:nth-last-child(1),
&:nth-last-child(2),
&:nth-last-child(3) {
width: 124px;
}
}
}
}
}
</style>
数据定义
data() {
return {
// 表格数据,,,数据多创建点,,才有滚动效果,,可以在样式里高度调小一点
detailData: [
{
companyname: "全市合计",
con_qyzq: "26606.94",
con_jrjg: "26606.94",
con_xtrz: "26606.94",
con_othe: "26606.94",
con_total: "26606.94",
end_qyzq: "26606.94",
end_jrjg: "26606.94",
end_xtrz: "26606.94",
end_othe: "26606.94",
end_total: "26606.94",
interest_total: "26606.94",
interest_this_month: "26606.94",
interest_next_month: "26606.94",
},
],
//定时器
timer: null,
// 鼠标是否进入
enter: false,
// 表单是否能滚动
isScorll: true,
};
},
滚动方法、鼠标移入移出方法
mounted() {
this.ceshiData();
this.tableScroll();
},
methods:{
// 测试数据,,造假数据
ceshiData() {
for (let i = 0; i < 20; i++) {
this.detailData.push({
companyname: "全市合计",
con_qyzq: "26606.94",
con_jrjg: "26606.94",
con_xtrz: "26606.94",
con_othe: "26606.94",
con_total: "26606.94",
end_qyzq: "26606.94",
end_jrjg: "26606.94",
end_xtrz: "26606.94",
end_othe: "26606.94",
end_total: "26606.94",
interest_total: "26606.94",
interest_this_month: "26606.94",
interest_next_month: "26606.94",
});
}
},
/**
* @desc 鼠标进去表格触发
**/
mouseEnter() {
this.enter = true;
if (!this.isScorll) return;
clearInterval(this.timer);
},
/**
* @desc 鼠标出去表格触发
**/
mouseLeave() {
this.enter = false;
if (!this.isScorll) return;
clearInterval(this.timer);
this.tableScroll();
},
/**
* @desc 表格滚动事件
**/
tableScroll() {
// 拿到表格挂载后的真实DOM
const divData = this.$refs.table;
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
this.timer = setInterval(() => {
// 元素自增距离顶部1像素,,,,没有滚动高度就一直是0
divData.scrollTop += 1;
// 可视高度 = 可滚动内容的高度
if (divData.clientHeight == divData.scrollHeight) {
// 如果相等了,,,则鼠标移入移出就让它都没有作用
this.isScorll = false;
return clearInterval(this.timer);
}
console.log(this.timer);
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (
divData.clientHeight + divData.scrollTop + 1 >
divData.scrollHeight
) {
clearInterval(this.timer);
setTimeout(() => {
// 如果鼠标进入了,,则不执行后面的,不再调用滚动事件新增新的定时器
if (this.enter) return;
divData.scrollTop = 0;
this.tableScroll();
}, 1000);
}
}, 40);
},
}