一、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实现表头固定,达到简单、实用、兼容的效果。