demo示例地址https://akryum.github.io/vue-virtual-scroller/# 仓库地址https://github.com/Akryum/vue-virtual-scroller
<template>
<div
class="recycle-scroller-demo"
:class="{
'page-mode': pageMode,
'full-page': pageModeFullPage,
}"
>
<div class="container">
<!-- <div class="header-search-wrap">
<div>
<span class="text-style">时间范围</span>
<el-date-picker
v-model="searchObj.timevalue"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div>
<span v-if="type != 'PARK'" class="text-style">所属区域</span>
<el-cascader
v-if="type !== 'PARK'"
class="my-style"
popper-class="site-cascader"
style="width: 200px;height:36px;margin-right:10px"
ref="casca"
size="small"
v-model="searchObj.treeIds"
:options="treeData"
:props="{ checkStrictly: false, value: 'id', label: 'name', children: 'childInfoVOList', emitPath: false, multiple: true }"
clearable>
</el-cascader>
</div>
<div>
<span class="text-style">项目名称</span>
<el-input clearable v-model="searchObj.corpName" placeholder="搜索项目名称" width="200"></el-input>
</div>
<div>
<span class="text-style" style="line-height: 36px;">污染程度</span><el-select v-model="searchObj.deviceStatus" placeholder="污染程度">
<el-option
v-for="item in optonsArr"
:key="item.id"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</div>
<div>
<el-button type="primary" size="mini" @click="fetchTableData">查 询</el-button>
<el-button type="primary" size="mini" @click="fetchTableData">重 置</el-button>
<el-button type="primary" size="mini" @click="fetchTableData">导出数据</el-button>
</div>
</div> -->
<div
v-if="renderScroller"
v-show="showScroller"
class="content"
>
<div class="wrapper">
<RecycleScroller
:key="pageModeFullPage"
ref="scroller"
class="scroller"
:items="items"
:item-size="50"
:buffer="buffer"
:page-mode="pageMode"
key-field="id"
size-field="height"
>
<template slot-scope="prop">
<dl class="table-body">
<dd>{{prop.index + 1}}</dd>
<dd>{{prop.item.name}}</dd>
<dd>{{prop.item.age}}</dd>
<dd>{{prop.item.company}}</dd>
<dd>{{prop.item.company}}</dd>
<dd>{{prop.item.company}}</dd>
<dd>{{prop.item.company}}</dd>
</dl>
</template>
</RecycleScroller>
</div>
</div>
<!-- <div class="content-wrap">
<RecycleScroller
class="scroller"
:items="items"
:item-size="32"
>
<template slot="before">
<dl class="table-head">
<dt>序号</dt>
<dt>区域</dt>
<dt>项目名称</dt>
<dt>pm10(μg/m3)</dt>
<dt>PM2.5</dt>
<dt>统计时间</dt>
<dt>污染程度</dt>
</dl>
</template>
<template slot-scope="prop">
<dl class="table-body">
<dd>{{prop.index + 1}}</dd>
<dd>{{prop.item.name}}</dd>
<dd>{{prop.item.age}}</dd>
<dd>{{prop.item.company}}</dd>
<dd>{{prop.item.company}}</dd>
<dd>{{prop.item.company}}</dd>
<dd>{{prop.item.company}}</dd>
</dl>
</template>
</RecycleScroller> -->
<!-- <DynamicScroller
class="scroller"
:items="items"
:emitUpdate="true"
@update="updateEvent"
:min-item-size="50">
<template slot="before">
<dl class="table-head">
<dt>序号</dt>
<dt>区域</dt>
<dt>项目名称</dt>
<dt>pm10(μg/m3)</dt>
<dt>PM2.5</dt>
<dt>统计时间</dt>
<dt>污染程度</dt>
</dl>
</template>
<template v-slot="{ item, index, active }">
<DynamicScrollerItem
:item="items"
:active="active"
buffer="20"
:size-dependencies="[
item.name,
]"
:data-index="index"
>
<dl class="table-body">
<dd>{{index + 1}}</dd>
<dd>{{item.name}}</dd>
<dd>{{item.age}}</dd>
<dd>{{item.company}}</dd>
<dd>{{item.company}}</dd>
<dd>{{item.company}}</dd>
<dd>{{item.company}}</dd>
</dl>
</DynamicScrollerItem>
</template>
</DynamicScroller> -->
</div>
</div>
</template>
<script>
import api from 'api';
import GetUrlParams from 'mixins/getUrlParams'
export default {
data() {
return {
searchObj: {},
treeData: [],
count: 10000,
renderScroller: true,
showScroller: true,
scopedSlots: false,
buffer: 200,
poolSize: 2000,
enableLetters: true,
pageMode: false,
pageModeFullPage: true,
items: [
{
'id': '601919b2d2e8a87934751e857',
'age': 27,
'name': 'Maldonado Puckett1',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e856',
'age': 27,
'name': 'Maldonado Puckett',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e855',
'age': 27,
'name': 'Maldonado 222',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e854',
'age': 27,
'name': 'Maldonado 33',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e853',
'age': 27,
'name': 'Maldonado 44',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e852',
'age': 27,
'name': 'Maldonado 55',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e0',
'age': 27,
'name': 'Maldonado Puckett1',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e81',
'age': 27,
'name': 'Maldonado Puckett',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e82',
'age': 27,
'name': 'Maldonado 222',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e3',
'age': 27,
'name': 'Maldonado 33',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e5',
'age': 27,
'name': 'Maldonado 44',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e7',
'age': 27,
'name': 'Maldonado 55',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a879347517',
'age': 27,
'name': 'Maldonado Puckett1',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e84',
'age': 27,
'name': 'Maldonado Puckett',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e85',
'age': 27,
'name': 'Maldonado 222',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e8584',
'age': 27,
'name': 'Maldonado 33',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e8539',
'age': 27,
'name': 'Maldonado 44',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e85200',
'age': 27,
'name': 'Maldonado 55',
'company': 'LEXICONDO'
}, {
'id': '601919b2d2e8a87934751e8554',
'age': 27,
'name': 'Maldonado Puckett1',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e85654',
'age': 27,
'name': 'Maldonado Puckett',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e85578',
'age': 27,
'name': 'Maldonado 222',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e85469',
'age': 27,
'name': 'Maldonado 33',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e85355',
'age': 27,
'name': 'Maldonado 44',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e85266',
'age': 27,
'name': 'Maldonado 55',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e8577',
'age': 27,
'name': 'Maldonado Puckett1',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e85688',
'age': 27,
'name': 'Maldonado Puckett',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e85500',
'age': 27,
'name': 'Maldonado 222',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e8545',
'age': 27,
'name': 'Maldonado 33',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e8537',
'age': 27,
'name': 'Maldonado 44',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e8528',
'age': 27,
'name': 'Maldonado 55',
'company': 'LEXICONDO'
}, {
'id': '601919b2d2e8a87934751e859',
'age': 27,
'name': 'Maldonado Puckett1',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e8560',
'age': 27,
'name': 'Maldonado Puckett',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e8551',
'age': 27,
'name': 'Maldonado 222',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e8542',
'age': 27,
'name': 'Maldonado 33',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e8533',
'age': 27,
'name': 'Maldonado 44',
'company': 'LEXICONDO'
},
{
'id': '601919b2d2e8a87934751e85028',
'age': 27,
'name': 'Maldonado 55',
'company': 'LEXICONDO'
}
],
optionsArr: [{ label: '全部', value: '0' }, { label: '管理人员', value: '10' }, { label: '劳务人员', value: '20' }]
}
},
mixins: [GetUrlParams],
components: {
},
mounted() {
this.getChildExcludePark()
window.scroller = this.$refs.scroller
},
methods: {
getChildExcludePark() {
const type = this.type;
const id = this.id;
this.$get(api.getChildExcludePark(this.globalTenantId, this.type, this.id), {
tenantId: this.globalTenantId,
type,
id
}).then(res => {
if(res.data) {
const walk = (arr) => {
arr.forEach(item => {
if(item.childInfoVOList && !item.childInfoVOList.length) {
delete item.childInfoVOList
}else {
walk(item.childInfoVOList)
}
})
}
walk([res.data])
this.treeData = [res.data];
}
})
},
updateEvent(a, b, c) {
console.log(a, b, c)
}
}
}
</script>
<style scoped lang="less">
.recycle-scroller-demo:not(.page-mode) {
height: 100%;
}
.recycle-scroller-demo.page-mode:not(.full-page) {
height: 100%;
}
.recycle-scroller-demo.page-mode {
flex: auto 0 0;
}
.recycle-scroller-demo.page-mode .toolbar {
border-bottom: solid 1px #e0edfa;
}
.content {
height: 100%;
flex: 100% 1 1;
border: solid 1px #42b983;
position: relative;
}
.recycle-scroller-demo.page-mode:not(.full-page) .content {
overflow: auto;
}
.recycle-scroller-demo:not(.page-mode) .wrapper {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scroller {
width: 100%;
height: 100%;
}
.container{
overflow: auto;
height: 100%;
}
.content-wrap{
overflow: auto;
height: 100%;
}
/deep/ .vue-recycle-scroller__item-view{
padding: 20px 0;
border-bottom: 1px solid #3399FF;
border-left: 1px solid #3399FF;
border-right: 1px solid #3399FF;
}
.user {
height: 32%;
padding: 0 12px;
display: flex;
align-items: center;
}
.container{
.table-head{
display: flex;
flex-direction: row;
justify-content: flex-start;
dt{
width: 15%;
}
}
.table-body{
display: flex;
flex-direction: row;
justify-content: flex-start;
dd{
width: 15%;
}
}
.header-search-wrap{
display: flex;
flex-direction: row;
justify-content: flex-start;
.el-input{
width: 200px;
}
/deep/ .el-input__inner{
height: 40px;
line-height: 40px;
border: 1px solid rgba(16, 220, 250, 0.4);
background-color: transparent;
color: #fff;
}
/deep/ .el-input__inner{
background-color: transparent;
border: 1px solid rgba(16, 220, 250, 0.4);
color: #fff;
}
/deep/ .el-input__inner:focus{
opacity: 1;
}
.el-select{
vertical-align: top;
/deep/ .el-input{
width: 160px;
.el-input__inner{
height: 36px;
line-height: 36px;
background-color: transparent;
color: #fff;
border: 1px solid rgba(16, 220, 250, 0.4);
}
}
}
.el-cascader{
/deep/.el-input__inner{
border: 1px solid rgba(16, 220, 250, 0.4);
background-color: transparent;
height: 36px;
}
/deep/.el-input__inner:hover{
border: 1px solid rgba(16, 220, 250, 0.4);
background-color: transparent;
}
/deep/.el-input__inner:focus{
border: 1px solid rgba(16, 220, 250, 0.4);
background-color: transparent;
}
}
/deep/ .el-date-editor .el-range-input{
color: #fff;
}
/deep/ .el-date-editor .el-range-separator{
color: #fff;
}
.el-button--mini, .el-button--mini.is-round{
padding: 11px 12px;
}
.el-button--primary{
background: rgba(5, 35, 76, 0.2);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.el-button--primary:hover{
color: #10DCFA;
border: 1px solid #10DCFA;
}
.el-button+.el-button{
margin-left: 6px;
}
}
}
</style>