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實現表頭固定，達到簡單、實用、兼容的效果。