element-ui的el-table表格实现⽆限滚动，使⽤⾃带的infinite-scroll
背景：
需要在el-tablel⾥实现滚动到底部加载更多数据
问题：使⽤element⾃带的⽆限滚动，但是实际⽤下来发现，指令只能作⽤于当前绑定的元素上，如下：
<ul class="infinite-list" v-infinite-scroll ="load" >
<li v-for="(item, index) in tableData":key="index">{{ item.name }}</li>
</ul>
对于不是真正的出现滚动条的标签，却⽆能为⼒
<el-table
border
height="400"
v-infinite-scroll="load"
:data="tableData"
>
<el-table-column prop="date" label="⽇期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="150"></el-table-column>
<el-table-column prop="address" label="地址" width="240"></el-table-column>
</el-table>
标签不是真正的容器，绑定了指令，⽆法⽣效
实现
第⼀步：判断滚到底部
const{ scrollTop, scrollHeight, clientHeight }= targetEl
if(scrollHeight === scrollTop + clientHeight){
console.log('到底部了！')
}
简洁版：
export default{
name:'load-more',
bind(el, binding, vnode){
binding.handler=function(){
const{scrollTop, scrollHeight, clientHeight}= el
if(scrollHeight === scrollTop + clientHeight){
binding.value && binding.value()
}
}
el.addEventListener('scroll', binding.handler)
},
unbind(el, binding){
el =null
}
}
把写好的指令在组件内注册后，即可⽣效。
我们的指令能够⽀持：
1. 可指定作⽤的元素
2. 是否禁⽌⽆限加载
3. ⽀持设置滚动到底部的偏移量
4. ⽀持防抖
完整代码：
<template>
<div>
<el-table
border
height="400"
:data="visibleData"
:
row-key="getRowKeys"
:load-more-disabled="disabledLoad"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection":reserve-selection="true"width="55"></el-table-column> <el-table-column prop="date"label="⽇期"width="180"></el-table-column>
<div slot="append">滚动到底部加载更多</div>
</el-table>
</div>
</template>
<script>
const debounce=function(func, delay){
let timer =null
return function(){
if(timer)clearTimeout(timer)
timer =null
let self =this
let args = arguments
timer =setTimeout(()=>{
func.apply(self, args)
}, delay)
}
}
export default{
directives:{
'load-more':{
bind(el, binding, vnode){
const{ expand }= difiers
// 使⽤更丰富的功能，⽀持⽗组件的指令作⽤在指定的⼦组件上
if(expand){
/**
* target ⽬标DOM节点的类名
* distance 减少触发加载的距离阈值，单位为px
* func 触发的⽅法
* delay 防抖时延，单位为ms
* load-more-disabled 是否禁⽤⽆限加载
*/
let{ target, distance =0, func, delay =200}= binding.value
if(typeof target !=='string')return
let targetEl = el.querySelector(target)
if(!targetEl){
console.log('不到容器')
return
}
binding.handler =debounce(function(){
const{ scrollTop, scrollHeight, clientHeight }= targetEl
let disabled = el.getAttribute('load-more-disabled')
disabled = vnode[disabled]|| disabled
if(scrollHeight <= scrollTop + clientHeight + distance){
if(disabled)return
func &&func()
}
}, delay)
targetEl.addEventListener('scroll', binding.handler)
}else{
binding.handler = helper.debounce(function(){
const{ scrollTop, scrollHeight, clientHeight }= el
if(scrollHeight === scrollTop + clientHeight){
binding.value && binding.value()
}
},200)
el.addEventListener('scroll', binding.handler)
}
},
unbind(el, binding){
let{ arg }= binding
/
/ 使⽤更丰富的功能，⽀持⽗组件的指令作⽤在指定的⼦组件上
if(arg ==='expand'){
/**
/**
* target ⽬标DOM节点的类名
* offset 触发加载的距离阈值，单位为px
* method 触发的⽅法
* delay 防抖时延，单位为ms
*/
const{ target }= binding.value
if(typeof target !=='string')return
let targetEl = el.querySelector(target)
targetEl && veEventListener('scroll', binding.handler)
targetEl =null
}else{
el =null
}
}
}
},
data(){
return{
visibleCount:10,
tableData:[
{id:'234', date:'2016-06-01'},
{id:'34', date:'2016-06-01'},
{id:'24', date:'2016-06-01'},
{id:'23242', date:'2016-06-01'},
{id:'23243', date:'2016-06-01'},
{id:'23244', date:'2016-06-01'},
{id:'23245', date:'2016-06-01'},
{id:'23246', date:'2016-06-01'},
{id:'23247', date:'2016-06-01'},
{id:'23248', date:'2016-06-01'}
],
multipleSelection:[]
}
},
created(){
let count =1
while(count >=0){
count--
this.tableData.push(
{ id:'1213', date:'2016-05-02'},
{ id:'11123', date:'2016-05-02'},
{ id:'123023', date:'2016-05-02'},
{ id:'1253', date:'2016-05-02'},
{ id:'1243', date:'2016-05-02'},
{ id:'1263', date:'2016-05-02'},
{ id:'1273', date:'2016-05-02'},
{ id:'1283', date:'2016-05-02'},
{ id:'1293', date:'2016-05-02'},
{ id:'1203', date:'2016-05-02'},
{ id:'1323', date:'2016-05-02'},
{ id:'1423', date:'2016-05-02'},
{ id:'1523', date:'2016-05-02'},
{ id:'1623', date:'2016-05-02'},
{ id:'1723', date:'2016-05-02'},
{ id:'1823', date:'2016-05-02'},
{ id:'1923', date:'2016-05-02'},
{ id:'1023', date:'2016-05-02'},
{ id:'12323', date:'2016-05-02'},
{ id:'134323', date:'2016-05-02'}
)
}
},
computed:{
disabledLoad(){
return false
},
visibleData(){
return this.tableData.slice(0, Math.min(this.tableData.length,this.visibleCount)) }
},
methods:{
loadmore(){
console.log('滚动到底部了');
this.visibleCount +=10;
},
handleSelectionChange(val){
this.multipleSelection = val;
console.log(this.multipleSelection)
console.log(this.multipleSelection)
const ids =this.multipleSelection.map(item =>{
return item.id
})
console.log(ids)
},
getRowKeys(row){
return row.id
}
}
}
</script>
注：
el-table⾥的:row-key="getRowKeys"和@selection-change="handleSelectionChange"配合el-table-column⾥的:reserve-selection="true"
实现了⽆限加载的同时记住已选内容
参考⽂章：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论