elementUi - table实现滚动加载
vue+element-ui table实现滚动加载
自定义指令实现
第一步:在main.js里注册
Vue.directive('loadmore', {
bind(el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
let sign = 0
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign) {
binding.value()
}
})
}
})
注意:
scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位。就是下图中,54条数据的高度,但是因为有滚动条,所以屏幕看不到这么高
scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条,则scrollTop的值为0,该值只能是正值。就是下图中红色框的高度
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小,实际上就是可视区域的大小。就是下图红色箭头的高度
scrollHeight-scrollTop-clientHeight=0,这个时候可以就是滚动条滚到底部的时候了。(如果表格有padding,margin值,需要减去)
第二步:在组件中,使用自定义的事件
v-loadmore=“loadMore”
<el-table
:data="build"
:height="tableheight"
style="width: 100%"
:header-cell-style="rowclass"
:row-class-name="tableRowClassName"
:cell-style="{'text-align':'center'}"
border
fit
v-if="tabindex == 0 && isPower == '煤电'"
ref="tableright1"
v-loadmore="loadMore"
tooltip-effect="dark"
>
</el-table>
在methods中调用loadMore
//表格滚动加载
tableloadMore () {
if (this.currentPage < this.totalPage) {//当前页数小于总页数就请求
this.currentPage++;//当前页数自增
this.$axios({
method:'get',
url:this.api+'admin/StockLevel',
params:{
enabled:this.value1,
page:this.page,
limit:this.limit
}
}).then(res=>{
this.build = res.data.data.arr
})
}else{
console.log('到底了', this.page)
}
}
example
<template>
<div class="content">
<el-tabs v-model="activeName">
<el-tab-pane label="全部对账订单" name="all" />
<el-tab-pane label="未对账" name="0" />
<el-tab-pane label="对账中" name="1" />
<el-tab-pane label="已对账" name="2" />
</el-tabs>
<div class="control-line">
<el-date-picker
v-model="dateValue"
type="datetimerange"
size="small"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="timestamp"
align="right"
@change="dateChange"
></el-date-picker>
<el-button
size="small"
:disabled="!checkboxData.length"
type="primary"
@click="dialogFormVisible = true"
>导出</el-button>
</div>
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
:border="true"
height="216"
v-loadmore="loadmore"
ref="loadmore"
@selection-change="selectionchange"
>
<el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
<el-table-column prop="orderCode" label="订单编号"></el-table-column>
<el-table-column prop="billCode" label="对账单号"></el-table-column>
<el-table-column prop="calcState" label="对账单状态">
<template
slot-scope="scope"
>{{scope.row.calcState==='0'?'未对账':scope.row.calcState==='1'?'对账中':'已对账'}}</template>
</el-table-column>
<el-table-column prop="createTime" label="交易时间"></el-table-column>
<el-table-column prop="buyerName" label="买家名称"></el-table-column>
<el-table-column prop="sellerName" label="卖家名称"></el-table-column>
<el-table-column prop="amount" label="订单总额"></el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click="toDetail(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="确认订单" :visible.sync="dialogFormVisible">
<el-table
:data="checkboxData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
:border="true"
max-height="516"
>
<el-table-column prop="orderCode" label="订单编号"></el-table-column>
<el-table-column prop="createTime" label="交易时间"></el-table-column>
<el-table-column prop="buyerName" label="买家名称"></el-table-column>
<el-table-column prop="sellerName" label="卖家名称"></el-table-column>
<el-table-column prop="amount" label="订单总额"></el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmExport">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getList } from "@/views/admin/api/shop-supplierOrder";
export default {
data() {
const pickerOptions = {
shortcuts: [
{
text: "最近一周",
onClick: function(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick: function(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick: function(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
}
}
]
};
return {
scrollNode: null,
activeName: "all",
dateValue: "",
pickerOptions,
tableData: [],
dialogFormVisible: false,
checkboxData: [],
tempChooseData: null,
isloadmore: false,
listQuery: {
calcState: "",
// 搜索条件
pageNum: 1,
pageSize: 3,
startTime: "",
endTime: "",
orderStatus: "COMPLETED"
},
pageSize: 3,
total: 0,
loading: true
};
},
directives: {
loadmore: {
bind(el, binding) {
const selectWrap = el.querySelector(".el-table__body-wrapper");
selectWrap.addEventListener("scroll", function() {
let sign = 0;
const scrollDistance =
this.scrollHeight - this.scrollTop - this.clientHeight;
if (scrollDistance <= sign) {
binding.value();
}
});
}
}
},
watch: {
activeName: function(val) {
this.listQuery.calcState = val === "all" ? "" : val;
this.listQuery.pageSize = this.pageSize;
this.init();
}
},
created() {
this.init();
},
methods: {
loadmore() {
if (this.listQuery.pageNum < this.total) {
this.listQuery.pageNum += 1;
this.isloadmore = true;
this.getList();
} else {
this.$message.warning("没有更多了……");
}
},
init() {
if (this.$refs.loadmore)
this.$refs.loadmore.$el.querySelector(
".el-table__body-wrapper"
).scrollTop = 0;
this.isloadmore = false;
this.listQuery.pageNum = 1;
this.tableData = [];
this.checkboxData = [];
this.getList();
},
getList() {
this.tempChooseData = JSON.parse(JSON.stringify(this.checkboxData));
getList(this.listQuery).then(res => {
this.tableData = this.tableData.concat(res.data);
this.total = res.pages;
this.loading = false;
if (this.isloadmore) {
// setTimeout(() => {
this.$nextTick(() => {
this.tableData.forEach(v => {
if (this.tempChooseData.some(m => m.id === v.id)) {
this.$refs.loadmore.toggleRowSelection(v);
}
});
});
// }, 100);
}
});
},
dateChange: function(value) {
if (value) {
this.listQuery.startTime = value[0];
this.listQuery.endTime = value[1];
} else {
this.listQuery.startTime = null;
this.listQuery.endTime = null;
}
this.init();
},
selectable(item, index) {
return item.calcState == "0";
},
selectionchange(arr) {
this.checkboxData = arr;
},
confirmExport() {}
}
};
</script>
<style lang="scss" scoped>
.control-line {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
</style>
Lee2