网站里的轮廓图 怎么做的,app 制作公司,做网站用的什么语言,加工网平台这是渲染出来的数据 其实解决思路大致就是#xff1a;把后台返回的上万条数据#xff0c;进行分割#xff08;前端分页#xff09;#xff0c;这样先加载几十条#xff0c;然后再用懒加载的方式去concat#xff0c;完美解决
上代码
templatediv class把后台返回的上万条数据进行分割前端分页这样先加载几十条然后再用懒加载的方式去concat完美解决
上代码
templatediv classhome-contianerel-tablev-loadingloading:datatableListrefcontainerTableborderstripev-loadmoreloadmore:heightscrollerHeight:header-cell-style{ backgroundColor: #E4E4E4, color: #000000 }el-table-columnlabel序号aligncenterpropindexwidth50fixed/el-table-columnlabel部门alignleftpropdeptNamewidth100fixed/el-table-columnlabel仓库alignleftpropwareNamewidth200fixed//el-table/div
/templatescript
export default {data() {return {dataList: [],loading: false,resourceTotal: 0,resourceNum: 1,resourcePage: 20,tableList: []};},directives: {loadmore: {bind(el, binding) {const selectWrap el.querySelector(.el-table__body-wrapper);selectWrap.addEventListener(scroll, function() {const scrollDistance this.scrollHeight - this.scrollTop - this.clientHeight;// 判断是否到底,scrollTop为已滚动到元素上边界的像素数scrollHeight为元素完整的高度clientHeight为内容的可见宽度if (scrollDistance 10) {binding.value();}});}}},computed: {// 滚动区高度scrollerHeight: function() {return window.innerHeight - 200 px; //自定义高度需求}},created() {this.getList();},methods: {getList() {this.loading true;for (let index 0; index 100000; index) {let obj {index: index,deptName: index deptName,wareName: wareName index};this.dataList.push(obj);}this.tableList this.dataList.slice(0, this.resourcePage);this.resourceTotal this.tableList.length;this.resourceNum 1;this.loading false;},//懒加载loadmore() {this.resourceNum;this.searchLoadResource();},searchLoadResource() {let result [];if (this.resourcePage * this.resourceNum this.dataList.length) {result this.dataList.slice(this.resourcePage * (this.resourceNum - 1),this.resourcePage * this.resourceNum);} else {result this.dataList.slice(this.resourcePage * (this.resourceNum - 1),this.dataList.length);}this.resourceTotal result.length;this.tableList this.tableList.concat(result);}}
};
/script
style/style
