Vue查询数据并通过bootstarp table渲染数据

首先我们需要将Vue与Bootstrap Table集成，方法如下：

1. 安装依赖

npm install vue bootstrap-vue bootstrap jquery popper.js

2. 配置Bootstrap Table

在Vue的组件中，引入Bootstrap Table并在“mounted”钩子函数中初始化，示例如下：

<template>
  <div>
    <b-table ref="table" :items="items"></b-table>
  </div>
</template>

<script>
import $ from 'jquery'
import 'popper.js'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import { BTable } from 'bootstrap-vue'

export default {
  data() {
    return {
      items: []
    }
  },
  components: {
    BTable
  },
  mounted() {
    $(this.$refs.table.$el).find('table').bootstrapTable({
      columns: [{
        field: 'id',
        title: 'ID'
      },{
        field: 'name',
        title: 'Name'
      },{
        field: 'gender',
        title: 'Gender'
      }],
      onLoadSuccess: function(data) {
        console.log(data);
      }
    });
  }
}
</script>

在上面的代码中，我们在“mounted”钩子函数中初始化Bootstrap Table，并传入了表头“columns”，和当表格数据成功加载时执行的回调函数“onLoadSuccess”。

3. 查询数据

接下来，我们需要查询数据。在这个例子中，我们可以使用Vue Resource库来发送请求。在这里，我们假设API是返回一个数组的JSON数据。我们可以在“created”钩子函数中发出HTTP GET请求，然后将数据保存在我们的data属性中。

<template>
  <div>
    <b-table ref="table" :items="items"></b-table>
  </div>
</template>

<script>
import $ from 'jquery'
import 'popper.js'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import { BTable } from 'bootstrap-vue'
import VueResource from 'vue-resource'

Vue.use(VueResource);

export default {
  data() {
    return {
      items: []
    }
  },
  components: {
    BTable
  },
  created() {
    this.$http.get('/api/data').then(response => {
      this.items = response.data;
    }, error => {
      console.log(error.statusText);
    });
  },
  mounted() {
    $(this.$refs.table.$el).find('table').bootstrapTable({
      columns: [{
        field: 'id',
        title: 'ID'
      },{
        field: 'name',
        title: 'Name'
      },{
        field: 'gender',
        title: 'Gender'
      }],
      onLoadSuccess: function(data) {
        console.log(data);
      }
    });
  }
}
</script>

在上面的代码中，我们使用了Vue Resource发送GET请求，然后在回调函数中将返回的数据设置为我们的“items”数据对象。

4. 完成！

现在，我们已经完成了Vue查询数据并通过Bootstrap Table渲染数据的攻略！下面是两个攻略完整示例：

示例1：查询Github用户列表

<template>
  <div>
    <b-table ref="table" :items="users"></b-table>
  </div>
</template>

<script>
import $ from 'jquery'
import 'popper.js'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import { BTable } from 'bootstrap-vue'
import VueResource from 'vue-resource'

Vue.use(VueResource);

export default {
  data() {
    return {
      users: []
    }
  },
  components: {
    BTable
  },
  created() {
    this.$http.get('https://api.github.com/users').then(response => {
      this.users = response.data;
    }, error => {
      console.log(error.statusText);
    });
  },
  mounted() {
    $(this.$refs.table.$el).find('table').bootstrapTable({
      columns: [{
        field: 'id',
        title: 'ID'
      },{
        field: 'avatar_url',
        title: 'Avatar'
      },{
        field: 'login',
        title: 'Name'
      }],
      onLoadSuccess: function(data) {
        console.log(data);
      }
    });
  }
}
</script>

在这个示例中，我们查询Github用户列表并渲染到Bootstrap Table中。

示例2：从XML文件读取数据

<template>
  <div>
    <b-table ref="table" :items="items"></b-table>
  </div>
</template>

<script>
import $ from 'jquery'
import 'popper.js'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import { BTable } from 'bootstrap-vue'
import VueResource from 'vue-resource'

Vue.use(VueResource);

export default {
  data() {
    return {
      items: []
    }
  },
  components: {
    BTable
  },
  created() {
    this.$http.get('/data/people.xml').then(response => {
      var xml = response.data;
      var $xml = $(xml);
      var persons = [];
      $xml.find('person').each(function() {
        var person = {};
        person.id = $(this).attr('id');
        person.name = $(this).find('name').text();
        person.gender = $(this).find('gender').text();
        persons.push(person);
      });
      this.items = persons;
    }, error => {
      console.log(error.statusText);
    });
  },
  mounted() {
    $(this.$refs.table.$el).find('table').bootstrapTable({
      columns: [{
        field: 'id',
        title: 'ID'
      },{
        field: 'name',
        title: 'Name'
      },{
        field: 'gender',
        title: 'Gender'
      }],
      onLoadSuccess: function(data) {
        console.log(data);
      }
    });
  }
}
</script>

在这个示例中，我们从一个XML文件中读取数据，并将其渲染到Bootstrap Table中。