vue动态渲染表格，显示上万条数据

<template><!-- 表格 --><div class="table-box"><div class="tabletbody"><div id="divScroll" style="float:right;"></div><div class="tableContain"><table class="tbody mainTable"><thead><tr><td >名次</td><!--<td v-if="object_type==1">序号</td>--><td >会员名称</td><td >足环号</td><td v-if="object_type==0">地区</td><td >羽色</td><td >归巢时间</td><td >分速(米/分)</td><td>电子环号</td><td v-if="object_type==1">空距(公里)</td><td v-if="object_type==1">空距差(米)</td><td v-if="object_type==1">上传时间</td><td v-if="object_type==1">实时经度</td><td v-if="object_type==1">实时纬度</td><td v-if="object_type==1">鸽舍经度</td><td v-if="object_type==1">鸽舍纬度</td><td v-if="object_type==1">奖项编号</td><td >通道板</td><!--<td v-if="object_type==1">状态</td>--></tr></thead><tbody id="tblList"><tr id="trTpl"><td id="row_num" v-if="object_type==1"> </td><!--<td id="homing_sn" v-if="object_type==1"> </td>--><td id="homing_sn" v-if="object_type==0"> </td><td id="member_name"> </td><td id="foot_ring_sn"> </td><td id="province_city" v-if="object_type==0"> </td><td id="plumage_color"> </td><td id="homing_time"> </td><td id="speed"> </td><td id="electric_sn"> </td><td id="memo" v-if="object_type==1"></td><td id="distance" v-if="object_type==1"></td><td id="save_time" v-if="object_type==1"></td><td id="sensor_longitude" v-if="object_type==1"></td><td id="sensor_latitude" v-if="object_type==1"></td><td id="dovecote_longitude" v-if="object_type==1"></td><td id="dovecote_latitude" v-if="object_type==1"></td><td id="prize_list" v-if="object_type==1"></td><td id="channel_plate_sn"> </td><!--<td id="pigeon_state" v-if="object_type==1"> </td>--></tr></tbody></table></div></div></div>
</template><script type="text/ecmascript-6">export default {data(){return{}},methods: {tabledata(){//30 是表格表头的高度let height = parseInt($(".waitingHome .table-box").css("height"))-parseInt($(".waitingHome .status-box").css("height"))-30;console.log(height,"获取到的表格高度");//tblListconsole.log("一行的高度",$(".waitingHome .tblList tr"));let that=this;//总赛鸽数let alldove=this.table.length;this.scrbar.setOptions({ total: alldove,size:height }); //总数据条数  显示表格高度this.scrbar.onScroll = function(pos) { ShowData(pos); }; //滚动的时候  滚动高度返回var items = this.scrbar.getPageItems(); //计算一页显示条数var tpl = document.getElementById("trTpl");//创建模板表格单行tpl.parentNode.removeChild(tpl); //单行的父节点除去子节点var list = document.getElementById("tblList");//创建列表for (var i = 0; i < alldove && i < parseInt(items); i++) {//一屏显示条数，创建表格var nr = tpl.cloneNode(true);list.appendChild(nr);}//判断所有的归巢数是否多于屏幕显示数if(this.object_type==0){//条数-渲染条数let allheight=alldove*this.itemHeight;
//          let allheight=height;$(".scrollbox").animate({scrollTop:allheight},0);//条数*高度
//          $(".scrollbox").animate({scrollTop:2000},0);//条数*高度}else if(this.object_type==1){//条数-渲染条数
//           $(".scrollbox").animate({scrollTop:0},0);//条数*高度}let item;if(this.object_type==0){if(alldove>parseInt(items)){//22>21
//            item=parseInt(items+Number(1));item=parseInt(items);ShowData(parseInt(alldove-parseInt(items)));//21条数据}else{item=parseInt(alldove);ShowData(that.scrbar.getPos());}}else if(this.object_type==1){if(alldove>items){
//            item=parseInt(items+Number(1));item=parseInt(items);ShowData(that.scrbar.getPos());}else{item=parseInt(alldove);ShowData(that.scrbar.getPos());}}//去掉渲染多余的空表格//item 21$("#tblList tr").filter(function(index) {return $("td:empty", this);}).slice(item).remove();//ShowData(that.scrbar.getPos());//滚动位置显示条数function ShowData(pos) {var n;//计算一页显示条数if(alldove>items){n=parseInt(that.scrbar.getPageItems());}else{n=alldove;}var rows=document.getElementById("tblList").rows;//返回表格所有行for (var i = 0; i <n; i++){//一页显示条数var row = rows[i];var item = that.table[i + pos];//滚动位置加上显示条数=应该有的条数if(that.object_type==1){row.cells["row_num"].innerHTML = item["row_num"];row.cells["distance"].innerHTML = item["distance"];row.cells["memo"].innerHTML = item["memo"].split(",")[0]/1000;row.cells["save_time"].innerHTML = item["save_time"];row.cells["sensor_longitude"].innerHTML = item["sensor_longitude"];row.cells["sensor_latitude"].innerHTML = item["sensor_latitude"];row.cells["dovecote_longitude"].innerHTML = item["dovecote_longitude"];row.cells["dovecote_latitude"].innerHTML = item["dovecote_latitude"];row.cells["prize_list"].innerHTML = item["prize_list"];$(row.cells["distance"]).parents("tr").css("background",'#fff');if(item["pigeon_state"]=='3'){//修改这个颜色时一定要注意！！！之后有关于这个颜色的判断$(row.cells["distance"]).parents("tr").css("background",'#FF7979');}$(row.cells["distance"]).parents("tr").click(function(){that.setElectricSn=$(this).children("#electric_sn").text();that.setGroupVisible=true;if($(this).css("backgroundColor")=="rgb(255, 121, 121)"){that.setDataFlag=false;}else{that.setDataFlag=true;that.homeState='0';}});}else if(that.object_type==0){row.cells["homing_sn"].innerHTML = item["homing_sn"];if(item["province_city"].length>5){row.cells["province_city"].innerHTML = item["province_city"].slice(0,5)+'...';}else{row.cells["province_city"].innerHTML = item["province_city"];}}row.cells["electric_sn"].innerHTML = item["electric_sn"];row.cells["channel_plate_sn"].innerHTML = item["channel_plate_sn"];if(item["member_name"].length>8){row.cells["member_name"].innerHTML = item["member_name"].slice(0,8)+'...';}else{row.cells["member_name"].innerHTML = item["member_name"];}row.cells["foot_ring_sn"].innerHTML = that.handleThreeFoot(item["foot_ring_sn"]);row.cells["plumage_color"].innerHTML = item["plumage_color"];row.cells["homing_time"].innerHTML = item["homing_time"];row.cells["speed"].innerHTML = item["speed"];$(row.cells["member_name"]).parents("tr").children("#member_name").attr('title',item["member_name"]);$(row.cells["province_city"]).parents("tr").children("#province_city").attr('title',item["province_city"]);}}},},created(){//原型函数function Scrollbar() {this.options = {total: 0, //数据总数pos: 0, //当前滚动位置itemSize: that.itemHeight, //单项尺寸（表格一行高度）size: 200 //控件尺寸（表格高度）};}Scrollbar.prototype = (function() {// 设置属性function setOptions(options) {for (var attr in options) {this.options[attr] = options[attr];//把option给了this.option} Refresh(this); }function Refresh(_this) {if (!_this.created) return; //设置控件高度_this.bar.style.height = _this.options.size + "px"; //设置内容高度var ch = _this.options.total * _this.options.itemSize;_this.content.style.height = ch + "px";//数据总数*一条的高度=显示内容的高度}//获取滚动位置function getPos() {//显示条数var top = this.bar.scrollTop+29;var pos = parseInt(top / this.options.itemSize);//  滚动高度/一条高度return pos;}//每页可展示的数据数量function getPageItems() {return this.options.size / this.options.itemSize;//（表格高度/显示一行高度=显示条数）}//滚动事件响应function OnScroll(_this) {var pos = _this.getPos();//显示条数即滚动位置，滚的时候显示滚到的数据if (pos == _this.options.pos)return; _this.options.pos = pos; _this.onScroll(pos);}//滚动条创建function CreateAt(dom) {//创建滚动条 宽30px 添加滚动事件var _this = this;//把_this给了thisvar bar = document.createElement("div");$(bar).addClass("scrollbox");var content = document.createElement("div");bar.appendChild(content);bar.style.width = "30px";bar.style.overflowY = "scroll";bar.style.overflowX = "hidden";if (bar.attachEvent) {bar.attachEvent("onscroll", function() { OnScroll(_this); });} else {//firefox兼容bar.addEventListener("scroll", function() {OnScroll(_this); }, false);}content.style.backgroundColor = "white";//滚动条空白部分是白色content.style.width = "1px";this.bar = bar; this.content = content;//把滚动条给了this指针if (typeof (dom) == "string") {dom = document.getElementById(dom);} dom.innerHTML = "";//创建滚动条元素 把滚动装进去dom.appendChild(this.bar);this.created = true; Refresh(this);}return {setOptions: setOptions,CreateAt: CreateAt,getPos: getPos,getPageItems: getPageItems,onScroll: null //模拟滚动条事件}; })();//新建滚动条this.scrbar = new Scrollbar();},mounted(){//创建滚动条this.scrbar.CreateAt("divScroll");},}
</script><style lang="css" type="text/css" rel="stylesheet/css"></style>

vue动态渲染表格，显示上万条数据相关推荐

vue实现显示10条数据点击查询看更多
vue实现显示10条数据点击查询看更多- 要求如下: 当页面的数据超过10条时只显示10条且显示点我查看更多喔~ 每次点击页面数据增加10条思路解析: 如题假设有20条数据== 只显示1 ...
android动态更新数据库数据,Android数据库更新——上万条数据的插入
在实际情况下,很可能遇到会向一个表中插入10万条数据,而这样的数据库更新,如果用寻常的方式,在SQLiteOpenHelper.onUpdate()方法中不断的执行SQL语句,那么效率是可想而知的,甚 ...
Extjs grid只能显示一条数据的问题
迁移项目代码时原本好用的列表只能显示一条数据,并且分页正确无误,找了很久才找到原因. Ext.create('Ext.data.Store', {model:opts.model,autoDestro ...
JS实现数组每次只显示5条数据，首尾相连显示
JS实现数组每次只显示5条数据,首尾相连显示今天朋友问我,如何点击一个按钮,每次只展示数组中的五条数据,如果数据有13条,默认展示数组1-5,点第一次为6-10,第二次为11-13,第三次从头再来 ...
IDEA 插件开发 - 动态设置表格的表头和数据，动态刷新
文章目录 IDEA 插件开发 - 动态设置表格的表头和数据,动态刷新 1.首先获取到容器实例 2.然后找到容器实例里面表格的实例 3.热更新表格,动态刷新数据 4.setDataVector 源码解析 ...
python数据写入csv不换行_你还在重复工作？Python轻松读写核对csv表格上万条数据！...
工作中要核对很多的数据,所以我想到了要用编程来解决重复性的劳动工作,因为以前要核对数据的时候啊,会用筛选功能,一个个去核对,再后来学了vlookup,稍微高级一点,但是vlookup的时候也会遇到很多 ...
el-table动态渲染表格列el-table-column且里边嵌套el-popover弹出框语法
总结下表格中每列的动态渲染实现语法:vue + element <el-table><template v-if="columns.length > 0"& ...
VUE动态展示表格字段
前言最近叼毛产品让写个需求,动态展示表格字段,要求动态根据用户习惯保存,下次进页面展示以前的,还能再次选择. 思考让用户选择展示那些字段保存db 进页面先查询db 然后根据table 字段属性过 ...
请求数据，后台返回上千条上万条数据，怎么办
1.让后端实行分页查询返回数据,否则跑路或者跟经理一起打后端一顿. 2.直接渲染,卡死用户.浏览器可以处理不过在渲染的时候会卡顿. 3.文档片段. 以前,每次创建 div 元素时,都会通过 appen ...

vue动态渲染表格，显示上万条数据

vue动态渲染表格，显示上万条数据相关推荐

最新文章

热门文章