用vue26写一个每五秒刷新bootstrapTable表格数据

首先，在Vue组件中引入bootstrapTable和jquery：

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap-table/dist/bootstrap-table.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.js'
import $ from 'jquery'

然后，在mounted()生命周期钩子函数中初始化bootstrapTable：

mounted() {
  this.initTable();
},
methods: {
  initTable() {
    $('#table').bootstrapTable({
      url: 'api/getData',
      columns: [{
        field: 'id',
        title: 'ID'
      }, {
        field: 'name',
        title: 'Name'
      }, {
        field: 'value',
        title: 'Value'
      }]
    });
  }
}

接下来，使用setInterval()方法每隔五秒调用一次刷新数据的方法：

mounted() {
  this.initTable();
  setInterval(() => {
    this.refreshTable();
  }, 5000);
},
methods: {
  initTable() {
    $('#table').bootstrapTable({
      url: 'api/getData',
      columns: [{
        field: 'id',
        title: 'ID'
      }, {
        field: 'name',
        title: 'Name'
      }, {
        field: 'value',
        title: 'Value'
      }]
    });
  },
  refreshTable() {
    $('#table').bootstrapTable('refresh', {
      silent: true
    });
  }
}

最后，将表格HTML代码放在Vue组件的模板中：

<template>
  <div>
    <table id="table"></table>
  </div>
</template>