HTML+VUE分页实现炫酷物联网大屏功能

    
 物联网平台数据统计page 
 
 
 
 
 
 
 监控列表
 
 
{{ item.categories }}
 
{{point.enterpriseName}}
{{point.pointName}}
 
无
断线
超标
异常
正常
 超标数据异常数据历史数据
 上一页
 {{activatePage + index -1}}
第{{pageIndex}}页/共{{totalPage}}页   共{{total}}条下一页

 var page_data = { key: null, pointId: null, limit: 6, total: 0, //总条数 pageIndex: 1, //第x页 totalPage: 0, // 总共页数， activatePage: 1, //激活页 默认为1 currentPage: 1, //当前页数 ，默认为1 pagelist: 7, //分页按钮个数 pageSize: 10, // 每页显示数量 mid: 3, //点击按钮 分页按钮重新渲染时的位置 一般 是 pagelist /2 居中 factoryHeader: [{ "categories": "站点名" }, { "categories": "企业名" }, { "categories": "状态" }, { "categories": "操作" } ], factory: [], timer: null //定时器 }; var page_vue = new Vue({ el: '#page', data: page_data, beforeCreate: () => { // this.send(); console.log("创建前page_data") }, created: () => { // this.dtu(); console.log("创建完成page_data") }, beforeMount: () => { }, mounted() { this.timer = setInterval(() => { setTimeout(this.getCurrentPageData(), 0) }, 1000 * 10) console.log("挂载完成page_data："); }, beforeUpdate() { console.log('=即将更新渲染page_data='); }, destroyed() { clearInterval(this.timer); this.timer = null; }, watch: {}, methods: { /* 监测列表 */ getCurrentPageData: function() { axios({ headers: { 'Content-Type': 'application/json' }, async: true, method: 'post', url: 'https://www.shbykj.top/bi/monitor/data', data: { 'page': page_vue.$data.currentPage, 'limit': page_vue.$data.limit, } }) .then(function(res) { console.log(res.data.data); if (res.data.data) { page_vue.$data.factory = res.data.data.data page_vue.$data.total = res.data.data.total console.log(".this.total" + page_vue.$
以上就是HTML+VUE分页实现炫酷物联网大屏功能的详细内容，更多请关注0133技术站其它相关文章！