vue+element ui 닻 포 지 셔 닝 실현
7149 단어 vueelementui닻 점 포 지 셔 닝
vue
<el-row :gutter="20">
<el-col :span="3">
<!-- -->
<el-menu :default-active="activeStep" @select="jump">
<el-menu-item v-for="(item,index) in menuData" :index="`${index}`" :key="item.subjectId">
<i class="el-icon-menu"></i>
<span slot="title">{{item.subjectName}}</span>
</el-menu-item>
</el-menu>
</el-col>
<!-- scroll -->
<el-col :span="21" class="scroll_cls" @scroll="onScroll">
<div v-for="(item,index) in tableObject" :key="index" style="height:500px">
<div class="title scroll-item" :id="item.name">{{item.name}}</div>
<el-table :data="item.rows" :key="index">
<el-table-column label=" " type="index" width="50"></el-table-column>
<el-table-column prop="channelId" label=" / id"></el-table-column>
<el-table-column prop="channelName" label=" / "></el-table-column>
<el-table-column prop="ruleCode" label=" id"></el-table-column>
<el-table-column prop="ruleName" label=" "></el-table-column>
<el-table-column prop="ruleVersion" label=" "></el-table-column>
<el-table-column prop="hierarchy" label=" ">
<template slot-scope="scope">
<span>{{scope.row.hierarchy == 1 ? ' ' : ' '}}</span>
</template>
</el-table-column>
<el-table-column label=" ">
<template slot-scope="scope">
<span>{{scope.row.beginTime + '-' + scope.row.endTime}}</span>
</template>
</el-table-column>
<el-table-column prop="creatorName" label=" "></el-table-column>
<el-table-column prop="createTime" label=" "></el-table-column>
<el-table-column prop="orderCnt" label=" ">
<template slot-scope="scope">
<el-button
@click="orderHandleClick(scope.row.orderCnt)"
type="text"
size="small"
>{{scope.row.orderCnt}}</el-button>
</template>
</el-table-column>
<el-table-column label=" ">
<template slot-scope="scope">
<el-button @click="settingHandleClick(scope.row)" type="text" size="small"> </el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="item.total > 5"
style="margin-top: 15px"
size="small"
@size-change="handleSizeChange($event,index)"
@current-change="handleCurrentChange($event,index)"
:current-page="ruleForm.ageNum"
:page-sizes="[10, 30, 50, 100]"
:page-size="ruleForm.pageSize"
layout="total, sizes, prev, pager, next"
:total="item.total"
></el-pagination>
</div>
</el-col>
</el-row>
js
//
methods: {
onScroll(e) {
let scrollItems = document.querySelectorAll(".scroll-item");
console.log(scrollItems)
console.log(e)
for (let i = scrollItems.length - 1; i >= 0; i--) {
//
let judge =
e.target.scrollTop >=
scrollItems[i].offsetTop - scrollItems[0].offsetTop;
if (judge) {
console.log(i)
this.activeStep = i.toString();
break;
}
}
},
jump(index) {
console.log(index)
let target = document.querySelector(".scroll_cls");
let scrollItems = document.querySelectorAll(".scroll-item");
//
if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
console.log(index)
console.log(typeof index)
this.activeStep = index;
}
let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop; // offsetParent( body) ( )
console.log(total)
let distance = document.querySelector(".scroll_cls").scrollTop; //
console.log(distance)
// let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // ( )
// , setTimeout , 50 ,10ms
//
let step = total / 50;
if (total > distance) {
smoothDown(document.querySelector(".scroll_cls"));
} else {
let newTotal = distance - total;
step = newTotal / 50;
smoothUp(document.querySelector(".scroll_cls"));
}
// element
function smoothDown(element) {
if (distance < total) {
distance += step;
element.scrollTop = distance;
setTimeout(smoothDown.bind(this, element), 10);
} else {
element.scrollTop = total;
}
}
// element
function smoothUp(element) {
if (distance > total) {
distance -= step;
element.scrollTop = distance;
setTimeout(smoothUp.bind(this, element), 10);
} else {
element.scrollTop = total;
}
}
document.querySelectorAll('.scroll-item').forEach((item, index1) => {
if (index === index1) {
item.scrollIntoView({
block: 'start',
behavior: 'smooth'
})
}
})
},
},
mounted() {
this.$nextTick(() => {
console.log(1)
window.addEventListener('scroll', this.onScroll,true)
})
},
css
.scroll_cls {
height: 500px;
overflow: auto;
}
전재이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.