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

本文实例讲述了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>
  <p class="row">
    <loadingHourGlass></loadingHourGlass>
    <p class="col-xs-12 top-offset-15 bottom-offset-15">
      <p>
        <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>
      </p>
      <button type="button" class="btn btn-sm btn-primary pull-right" v-on:click="editRecord()">添加任务</button>
    </p>
    <p 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>
            <th>操作</th>
          </tr>
        </thead>
        <tbody><!-- v-bind:class=" (item.completeCount/item.total=='1')?'text-success':'text-danger' " -->
          <tr v-for="item in tableList" v-bind:class="'id-' + item.id">
            <td>{{ item.file_name }}</td>
            <!-- {{ item.status | statusFilter }} -->
            <td class="status"></td>
            <!-- v-bind:class=" (item.completeCount/item.total=='1')?'text-success':'text-danger' " -->
            <!-- {{ item.completeRate }} -->
            <td class="rate"></td>
            <td>{{ item.create_time }}</td>
            <td>{{ item.description }}</td>
            <td>
              <button type="button" class="btn btn-primary btn-xs" v-on:click="showDetailModal(item.id,item.file_name)">详情</button>
              <!-- <button type="button" class="btn btn-danger btn-xs" v-on:click="test()">test</button> -->
            </td>
          </tr>
        </tbody>
      </table>
    </p>
  </p>
</template>

js

整体的效果如下，功能整体是实现了，但是感觉好笨的说，大家要是有好办法一定要告诉我哈！！

以上就是使用vue2.0结合DataTable插件实现表格动态刷新的方法的详细内容，更多请关注Gxl网其它相关文章！