vue2.0结合DataTable插件实现表格的动态刷新

今天周六啊!一想到我的凤九和东华要生小滚滚,我就归心似箭无心敲代码!

产品提出的需求是这样的,很普通的一个统计server端task完成率和状态的表格,要自动刷新其中的数据,并且当单个task完成的时候report给server端,看起来好easy好easy的一个需求啊!且听我说完哈!

我这边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都是前端弄,也就是说后端只管把一大坨数据塞到前端,然后前端自己组装分页器和完成模糊搜索,所以啊,我之前用的是DataTable这个插件,组装好的表格效果如下,看着没毛病哈!

可是涉及到自动刷新就有问题了,因为每次获取数据都是全量数据,用dataTable组装表格的话,就必须要组装好的表格destroy掉,然后再v-for再DataTable()组装..页面会一直一直闪!体验好差的说!

我只想出了一个比较笨的方法解决这个局部刷新的问题,大家要是有更好的方法一定要告诉我!!上代码!

1.v-for只渲染不变的数据,比如名字备注之类的,一直刷新的字段比如状态和完成率都为空,就这样,只用DataTable首次渲染表格

2.setRefresh是一个定时器,每隔1s就递归调用一次自己,query全量数据,存放到originTableList里

3.updateRefreshStatus是用原生的js去获取每行的dom,然后innerText去改变其值

4.reportTaskComplete是当当前这个task完成率达到100%就汇报给server

5.checkTaskRefresh是递归检查所有的任务,把完成的任务放到completeTaskList,如果全都完成了就把定时器清除掉

6.beforeRouteLeave是vue router的方法,在离开路由之后清除计时器

template

 

<template>
    <div class="row">
        <loadingHourGlass></loadingHourGlass>

        <div class="col-xs-12 top-offset-15 bottom-offset-15">
            <div>
                <strong class="pull-left line-height-24 right-offset-15">自动刷新开关:</strong>
                <iphoneSwitcher v-bind:status="refresh.status" v-bind:canSwitch="false" v-bind:callBackName="'switchRefreshStatus'"></iphoneSwitcher>
            </div>

            <button type="button" class="btn btn-sm btn-primary pull-right" v-on:click="editRecord()">添加任务</button>
        </div>

        <div class="col-xs-12 main-table-wrapper">
            <h4 class="page-header">点播刷新任务数据表格 <!-- <small>Secondary text</small> --></h4>
            <!-- <p>123</p> -->
            <table class="table table-striped table-hover table-bordered" id="main-table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>状态</th>
                        <th>完成率</th>
                        <th>创建时间</th>
                        <th>备注</th>
                    
  • 9
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值