VueTable详解

一、Vuetable切换

VueTable是一个基于Vue.js2.0和Bootstrap3的响应式分页和排序表格的插件，并且包含一些常用的功能。在使用VueTable时，往往会遇到数据源的切换，VueTable提供了两种切换方式。

1.简单的切换方式

vuetable: {
  apiMode: false,
  ...
},
slots: {
  data: function() {
    if (this.vuetable.apiMode) {
      // ajax data loading
    } else {
      // static data from json
    }
  }
}

当apiMode为false时，VueTable会从json数据源中加载数据；当apiMode为true时，VueTable会从API服务端获取数据。

2.灵活的切换方式

<div id="app">
  <vuetable :data="tableData"></vuetable>
</div>

Vue.component('vuetable', require('./components/VueTable.vue'));

let app = new Vue({
  el: '#app',
  data: {
    apiMode: false,
    tableData: []
  },
  mounted: function() {
    this.getData()
  },
  methods: {
    getData: function() {
      if (this.apiMode) {
        // call api service
      } else {
        this.tableData = require('./data.json');
      }
    }
  }
});

这种方式可以通过控制数据源来切换数据，比如从json切换为API，或者从生产环境切换到模拟环境。可以通过改变apiMode的值来控制数据源。

二、VueTable表头怎么加图标

在VueTable中，表头中的内容可以自定义，包括样式、图标等。可以通过下面的示例代码来实现表头图标的添加。

<thead>
  <tr>
    <th v-for="(field, key) in vuetable.tableFields" :key="key">
      {{ field.title }}
      <span v-if="field.sortField">
        <i class="fa fa-sort"@click="setSort(field.sortField)"></i>
      </span>
    </th>
  </tr>
</thead>

该代码中，通过font-awesome中的icon图标来实现排序图标的添加。

三、VueTable表头在左

在实际使用中，可能需要将VueTable的表头放置在表格左边，下面介绍一种简单的实现方式。

table {
  display: flex;
}
th {
  display: block;
  width: 100%;
  text-align: center;
}
td {
  display: block;
  width: 100%;
  text-align: center;
}

该代码中，通过CSS中的display:flex来实现表头和内容的左右布局。

四、VueTable表头固定4种方法选取

1.使用css的position和z-index属性

table {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
table thead tr th {
  position: relative;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
table th, table td {
  width: 20%;
  max-width: 20%;
  min-width: 20%;
  padding: 5px;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ccc;
}
table tbody {
  display: block;
  width: 100%;
  height: 200px;
  overflow-y: scroll;
}
table tbody tr:nth-of-type(even) {
  background-color: #f6f6f6;
}
table thead {
  background-color: #fff;
  position: sticky;
  top: 0;
}

该代码中，通过CSS中的position和z-index属性实现表头固定，而且在滚动内容时，表头会保持固定不动。

2.使用jQuery插件

<script src="jquery.stickytableheaders.min.js"></script>
<script>
  $('table').stickyTableHeaders();
</script>

该代码中使用了jQuery插件，实现了表头固定。

3.使用tableHeadFixer插件

<script src="jquery.tableHeadFixer.min.js"></script>
<script>
  $('table').tableHeadFixer({'head': true, 'foot': false});
</script>

该代码中，使用了tableHeadFixer插件，通过简单的API配置就可以实现表头固定。

4.使用pure CSS实现表头固定

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
}
th,
td {
  padding: 1em;
  border: 1px solid #ccc;
  text-align: left;
}
thead {
  display: table;
  table-layout: fixed;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #fff;
  z-index: 10;
  border-bottom: 1px solid #ccc;
}
tbody {
  display: block;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

该代码中，通过纯CSS实现表头固定，达到简单、实用、兼容的效果。

原创文章，作者：HYSJ，如若转载，请注明出处：https://www.506064.com/n/133730.html