一、效果
二、指令的封装
-
el:指令绑定到的元素,可以用来操作DOM,或者获取当前DOM的子级
-
binding:一个对象,包括了指令的参数,其中重要的参数有:
-
arg:传递给指令的参数,例如在
v-loadmore:el-table__body-wrapper="loadMore"
中,参数是"el-table__body-wrapper"
,例如在v-loadmore:el-table__body-wrapper:aa="loadMore"
中,参数是"el-table__body-wrapper:aa"
-
modifiers:传递给指令的修饰符对象,例如在
v-loadmore:el-table__body-wrapper.name.age="loadMore"
中,修饰符对象是{name: true, age: true}
-
value:传递给指令的值,例如在
v-loadmore:el-table__body-wrapper="loadMore"
中,值是loadMore
-
js
Vue.directive('loadmore', {
bind(el, binding) {
const {
arg,
value
} = binding
const selectWrap = el.querySelector(`.${arg}`) // 滚动的容器
selectWrap.addEventListener('scroll', function () {
const isNext = this.scrollHeight == this.scrollTop + this.clientHeight
if (isNext) {
value()
}
})
},
})
三、指令的使用
js
v-loadmore:el-table__body-wrapper="loadMore"
loadMore方法:
loadMore() {
if (this.total > this.tableData.length) {
this.params.pageNo++;
this.getList();
} else {
console.log("没有更多了");
}
}
完整代码:
js
<template>
<div>
<div style="text-align: right">
总条数:{{ total }}当前条数:{{ tableData.length }}
</div>
<el-table v-loadmore:el-table__body-wrapper="loadMore" :data="tableData" height="300" border>
<el-table-column prop="index" label="序号" width="100" />
<el-table-column prop="nameCn" label="中文名称" />
<el-table-column prop="nameEn" label="英文名称" />
<el-table-column prop="specsNames" label="规格" />
</el-table>
</div>
</template>
<script>
import { listApi } from "@/api/request";
export default {
data() {
return {
tableData: [],
params: { pageNo: 1, pageLe: 10 },
total: 0,
};
},
created() {
this.getList();
},
methods: {
loadMore() {
if (this.total > this.tableData.length) {
this.params.pageNo++;
this.getList();
} else {
console.log("没有更多了");
}
},
async getList() {
try {
const { total, data } = await listApi(this.params);
console.log("请求参数", { ...this.params }, "请求结果", total, data);
this.total = total;
if (this.params.pageNo == 1) {
this.tableData = data;
} else {
this.tableData.push(...data);
}
this.tableData = this.tableData.map((n, index) => ({
...n,
index: index + 1,
}));
} catch (err) {
console.log(err);
}
},
},
};
</script>
后续需要封装el-select和el-autocomplete组件的加载更多,select组件还需要用到修饰符
另外,需要实现通过修饰符传一个值,如100,滚动条距离底部100时就加载下一页