说明

本文主要实现表格的两个功能：

1.分页功能；
2.部分滚动：即表头thead固定，表身tbody滚动。

样式

对样式不敢兴趣可以忽略该段，本文重点是如何实现表格的两个功能。

为了表格美观，使用了样式，很多人喜欢用bootstrap，bootstrap看多了容易审美疲劳，于是用了semantic ui，对semantic ui感兴趣请移步官网，该样式清爽简约，如春雨后的一抹柳叶条垂挂在门前，沁人心脾，暗自留香，堪称简约样式的典范，值得珍藏！O(∩_∩)O哈哈~

官网：https://semantic-ui.com/introduction/getting-started.html

代码

自定义Vue组件-分页表格

闲话不多说，直接上xtemplates.js代码，该js内容是自定义Vue组件，实现了分页的功能。

Vue.component("scroll-page-table", {
  props: ["results"],
  data: function() {
  return {
  current_page_results: [],
  table_page: {
    current_page: 0,
    page_numbers: 0,
    active_number: 5,
    start_number: 1,
    show_tr_numbers: 50,
    loading_times: 1
  }
};
},
watch: {
results() {
  this.resetTablePage();
  this.showCurrentPageResults();
  this.$nextTick(function() {
    $(".ui.selection.dropdown").dropdown();
  });
}
},
methods: {
send() {
  this.table_page.loading_times += 1;
  this.$emit("search", this.table_page.loading_times);
},
showCurrentPageResults() {
  this.current_page_results = [];
  var s_idx =
    (this.table_page.current_page - 1) * this.table_page.show_tr_numbers;
  var e_idx =
    this.table_page.current_page * this.table_page.show_tr_numbers - 1;
  if (e_idx >= this.results.length) e_idx = this.results.length - 1;
  if (
    s_idx <= e_idx &&
    s_idx < this.results.length &&
    e_idx < this.results.length
  ) {
    this.current_page_results = this.results.slice(s_idx, e_idx + 1);
  }
},
resetTablePage() {
  this.table_page.page_numbers = Math.ceil(
    this.results.length / this.table_page.show_tr_numbers
  );
  if (this.table_page.page_numbers <= 0) this.table_page.current_page = 0;
  else if (this.table_page.loading_times == 1) {
    this.table_page.current_page = 1;
    this.table_page.start_number = 1;
  }
},
clickFirstPage() {
  if (this.table_page.page_numbers <= 0) return;
  this.table_page.current_page = 1;
  this.table_page.start_number = 1;

  this.showCurrentPageResults();
},
clickLastPage() {
  if (this.table_page.page_numbers <= 0) return;
  this.table_page.current_page = this.table_page.page_numbers;
  this.table_page.start_number =
    this.table_page.current_page - this.table_page.active_number + 1 < 1
      ? 1
      : this.table_page.current_page - this.table_page.active_number + 1;

  this.showCurrentPageResults();
},
clickPreviousPage() {
  if (this.table_page.page_numbers <= 0) return;
  this.table_page.current_page =
    this.table_page.current_page - 1 < 1
      ? 1
      : this.table_page.current_page - 1;
  this.table_page.start_number =
    this.table_page.current_page - this.table_page.active_number + 1 < 1
      ? 1
      : this.table_page.current_page - this.table_page.active_number + 1;

  this.showCurrentPageResults();
},
clickNextPage() {
  if (this.table_page.page_numbers <= 0) return;
  this.table_page.current_page =
    this.table_page.current_page + 1 > this.table_page.page_numbers
      ? this.table_page.page_numbers
      : this.table_page.current_page + 1;
  this.table_page.start_number =
    this.table_page.current_page - this.table_page.active_number + 1 < 1
      ? 1
      : this.table_page.current_page - this.table_page.active_number + 1;

  this.showCurrentPageResults();
},
clickNumberPage(index) {
  if (this.table_page.page_numbers <= 0) return;
  this.table_page.current_page = index;
  this.table_page.start_number =
    this.table_page.current_page - this.table_page.active_number + 1 < 1
      ? 1
      : this.table_page.current_page - this.table_page.active_number + 1;

  this.showCurrentPageResults();
}
},
template: `<div class="ui grid" style="font-family: monospace;">
  <div class="fourteen wide column">
    <table class="ui small celled striped table scroll-tbody">
      <thead>
        <tr>
          <th class="collapsing" style="width: 10%">
            序号
            </th>
          <th class="collapsing" style="width: 20%">
            时间
            </th>
          <th class="collapsing" style="width: 10%">
            日志级别
            </th>
          <th class="collapsing">日志内容</th>
        </tr>
      </thead>
      <tbody style="font-family: monospace;">
        <template v-for="result in current_page_results">
          <tr>
            <td
              class="collapsing"
              style="width: 10%"
              v-text="result.idx"
            ></td>
            <td
              class="collapsing"
              style="width: 20%"
              v-text="result.time"
            ></td>
            <td
              class="collapsing"
              style="width: 10%"
              v-text="result.level"
            ></td>
            <td class="collapsing">
              <div style="overflow:auto;" v-text="result.content"></div>
            </td>
          </tr>
        </template>
      </tbody>
      <tfoot  v-if="results.length>0"> // 分页功能，配合相关method，实现切换页码和显示功能
        <tr>
            <th colspan="5">
                <div class="ui right floated pagination menu font-18 huf">
                    <a class="icon item"  @click="send">加载更多...</a>
                    <a class="icon item" @click="clickFirstPage"><i
                            class="angle double left icon"></i></a>
                    <a class="icon item" @click="clickPreviousPage">
                        <i class="angle left icon"></i>
                    </a>
                    <div v-for="i in table_page.start_number+table_page.active_number-1<=table_page.page_numbers?table_page.start_number+table_page.active_number-1:table_page.page_numbers"
                    v-if="i>=table_page.start_number" >
                      <a class="item" v-if="i!=table_page.current_page" v-text="i"
                      @click="clickNumberPage(i)"></a>
                      <a class="active item" v-if="i==table_page.current_page" v-text="i"
                      @click="clickNumberPage(i)"></a>
                    </div>

                    <a class="disabled item"
                        v-if="table_page.start_number+table_page.active_number-1<table_page.page_numbers">...</a>
                    <a class="icon item" @click="clickNextPage">
                        <i class="angle right icon"></i>
                    </a>
                    <a class="icon item" @click="clickLastPage"><i
                            class="angle double right icon"></i></a>
                    <div class="ui selection dropdown item">
                        <div class="text" v-text="table_page.current_page"></div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a v-for="j in table_page.page_numbers" class="item"
                                v-text="j" @click="clickNumberPage(j)"></a>
                        </div>
                    </div>
                </div>
            </th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
`
});

如何使用-html代码

该代码除了如何使用vue组件外，还有实现了表头thead固定，只滚动表身tbody的功能。
为了方便测试，增加了选择日期查询功能获取数据显示在表格中，这部分可以用假数据替代，来验证表格是否使用正常。
再多说一句，日期控件jquery.datetimepicker真心不错，支持中文，这样设置jQuery.datetimepicker.setLocale('zh');即可(老母亲心态又犯了(⊙﹏⊙))。
该代码运行在django框架中，所以会有django特有的代码段，特此说明。

{% load static %}
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- Standard Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<!-- Site Properties -->
<title>分页表格和部分滚动测试代码</title>
<link rel="stylesheet" type="text/css" href="{% static 'net/assets/semantic.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'net/assets/jquery.datetimepicker.min.css' %}">

<!-- 固定表头thead，滚动表身tbody的样式 -->
<style>
    .scroll-tbody thead {
        display: block;
    }

    .scroll-tbody tbody {
        display: block;
        max-height: 550px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .scroll-tbody thead tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .scroll-tbody tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .scroll-tbody thead {
        width: calc(100% - 1em)
    }
</style>
</head>

<body>
<div id="huf_log_result">
    <div class="ui">
        <div class="ui form">
            <div class="fields">
                <div class="three wide field">
                    <label>开始时间</label>
                    <input type="text" class="search-date" id="search-from-date">
                </div>
                <div class="three wide field">
                    <label>结束时间</label>
                    <input type="text" class="search-date" id="search-to-date">
                </div>
                <div class="two wide field">
                    <label>查询</label>
                    <button :class="search_btn_class" id="search" @click="search(1)"><i
                            class="search icon"></i>查询</button>
                </div>
                <div v-if="message" class="three wide field">
                    <label style="color:#9F3A38;">提示</label>
                    <div style="color:#9F3A38;">
                        <p v-text="message"></p>
                    </div>
                </div>
            </div>
        </div>
        <div :class="table_loading_class">
            <div class="ui text loader">加载中...</div>
        </div>
        <scroll-page-table :results="results" @search="search">
        </scroll-page-table>
    </div>
</div>
<script src="{% static 'net/assets/jquery.min.js' %}"></script>
<script src="{% static 'net/assets/semantic.min.js' %}"></script>
<script src="{% static 'net/assets/vue.js' %}"></script>
<script src="{% static 'net/assets/jquery.datetimepicker.full.min.js' %}"></script>
<script src="{% static 'net/assets/d3.v5.min.js' %}"></script>
<script src="{% static 'net/assets/xtemplates.js' %}"></script>

<script>
    var data = {
        results: [],
        message: '',
        search_btn_class: 'ui blue button',
        table_loading_class: 'ui inverted dimmer',
    }

    var vm = new Vue({
        el: '#huf_log_result',
        data: data,
        methods: {
            search(times) {
                if ($('#search-from-date').val() == '' || $('#search-to-date').val() == '') {
                    vm.$set(data, 'message', '请选择开始时间和结束时间！')
                    return
                }
                var start_time_str = $('#search-from-date').val() + ':00'
                var end_time_str = $('#search-to-date').val() + ':59'
                var start_time = new Date(start_time_str.replace(/-/g, "/"))
                var end_time = new Date(end_time_str.replace(/-/g, "/"))
                if (start_time - end_time > 0) {
                    vm.$set(data, 'message', '开始时间必须小于结束时间！')
                    return
                }
                vm.$set(data, 'search_btn_class', 'ui blue loading button')
                vm.$set(data, 'message', '')
                vm.$set(data, 'table_loading_class', 'ui active inverted dimmer')
                $.getHufLogArray('huf.log', $('#search-from-date').val() + ':00', $('#search-to-date').val() + ':59', times, function (res) {
                    if (res && res.ret) {
                        if ('results' in res.ret) {
                            vm.$set(data, 'results', res.ret.results)
                        }
                        vm.$set(data, 'search_btn_class', 'ui blue button')
                        vm.$set(data, 'table_loading_class', 'ui inverted dimmer')
                    }
                }, function (res) {
                    vm.$set(data, 'search_btn_class', 'ui blue button')
                })
            },
        }
    })

    $(document).ready(function () {
        jQuery.datetimepicker.setLocale('zh');
        $('#search-from-date, #search-to-date').datetimepicker({
            format: 'Y-m-d H:i',
        });
    })
</script>
</body>
</html>

效果图

分页功能可下拉菜单选择页码，也可以点击页码，还可以点击加载更多按钮。
加载更多按钮通过$emit调用父组件方法获取新数据。

table.png