Vue · Table：手写横向竖向滚动表格，分页、条数设置

效果：

<template>
  <div>
    <div class="pages-tables" :style="{ height: screeHeight + 'px' }">
      <div class="table-header" :style="{ width: header.length * 150 + 'px' }">
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
          <colgroup>
            <col
              v-for="item in header"
              :key="item.label"
              style="width: 150px"
            />
          </colgroup>
          <thead>
            <tr>
              <th v-for="item in header" :key="item.prop">
                <span>{{ item.label }}</span>
              </th>
            </tr>
          </thead>
        </table>
      </div>
      <div
        class="table-body"
        :style="{
          width: header.length * 150 + 'px',
          height: screeHeight - 49 + 'px',
        }"
      >
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
          <colgroup>
            <col
              v-for="item in header"
              :key="item.label"
              style="width: 150px"
            />
          </colgroup>
          <tbody>
            <tr
              v-for="(tableItem, index) in dataList.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )"
              :key="'table' + index"
            >
              <td v-for="item in header" :key="item.prop">
                <span>{{ tableItem[item.prop] }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="pages-pager">
      <div class="select">
        <div class="select-input" @click="isSelect = !isSelect">
          <input
            type="text"
            placeholder=""
            readonly="readonly"
            class="input"
            :value="pagesizeFilter"
          />
          <span class="suffix"><i class="iconfont icon-wanggexiala"></i></span>
        </div>
        <div class="select-panel" v-show="isSelect">
          <div class="select-wrapper">
            <div
              v-for="(item, index) in selectList"
              :key="'select' + index"
              class="select-option"
              :class="pagesize == item ? 'is-selected' : ''"
              @click="choosePagesSize(item)"
            >
              {{ item }}条/页
            </div>
          </div>
        </div>
      </div>
      <div class="total">共 {{ dataList.length }} 条记录</div>
      <div class="jump">
        <button
          type="button"
          title="上一页"
          class="prev-btn"
          :class="currentPage == 1 ? 'is-disabled' : ''"
          @click="reducePage"
        >
          <i class="iconfont icon-wanggeshangyizhang"></i>
        </button>
        <span class="pager-jump"
          ><input
            type="text"
            autocomplete="off"
            class="pager-goto"
            v-model="currentPage"
        /></span>
        <span class="pager-count"
          ><span class="pager-separator">/</span><span>{{ total }}</span></span
        >
        <button type="button" title="下一页" class="next-btn" @click="addPage">
          <i class="iconfont icon-wanggexiayizhang"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pagesize: 10,
      isSelect: false,
      selectList: [10, 15, 20, 50, 100],
      screeHeight: `${document.documentElement.clientHeight - 170}`, // 屏幕高
      // loading: false,
      tableData: [],
      dataList: [],
      header: [],
    };
  },
  components: {
    Datetime,
  },
  computed: {
    pagesizeFilter() {
      return this.pagesize + "条/页";
    },
    total() {
      return Math.ceil(this.dataList.length / this.pagesize);
    },
  },
  filters: {},
  mounted() {
  },
  activated() {
  },
  methods: {
    // 上一页
    reducePage() {
      if (this.currentPage == 1) {
        return false;
      }
      this.currentPage = this.currentPage - 1;
    },
    // 下一页
    addPage() {
      if (this.currentPage == this.total) {
        return false;
      }
      this.currentPage = this.currentPage + 1;
    },
    // 选择条数
    choosePagesSize(item) {
      this.pagesize = item;
      this.currentPage = 1;
      this.isSelect = !this.isSelect;
    },
    findList() {
      this.loading = true;
      setTimeout(() => {
        const list = this.dataList;
        this.loading = false;
        this.total = list.length;
        this.tableData = list.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      }, 300);
    },
    /**
     * 获取数据列表
     */
    setTableData(data) {
      this.header = [
        { label: "网格", prop: "grid" },
        { label: "入群率", prop: "groupinRate" },
        { label: "户数", prop: "houseCount" },
        { label: "已入群人数", prop: "residentCount" },
        { label: "乡镇", prop: "town" },
        { label: "村社", prop: "village" },];
      let dataList = [{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东01网格","groupinRate":"100.00%","houseCount":4,"residentCount":4},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"糖村","grid":"小唐","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"test111","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"糖村","grid":"大唐","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"test333","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东02网格","groupinRate":"0%","houseCount":0,"residentCount":6},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东03网格","groupinRate":"0%","houseCount":0,"residentCount":1},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东01网格","groupinRate":"100.00%","houseCount":4,"residentCount":4},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"糖村","grid":"小唐","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"test111","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"糖村","grid":"大唐","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"test333","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东02网格","groupinRate":"0%","houseCount":0,"residentCount":6},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东03网格","groupinRate":"0%","houseCount":0,"residentCount":1},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"马村社区居委会","grid":"马村网格社区","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"马村社区居委会","grid":"马村网格","groupinRate":"0%","houseCount":0,"residentCount":0},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"白莲社区居委会","grid":"青莲网格","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"白莲社区居委会","grid":"白莲网格","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"马村社区居委会","grid":"包金村网格","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"白莲社区居委会","grid":"红莲网格","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"白莲社区居委会","grid":"黄莲网格","groupinRate":"0%","houseCount":0,"residentCount":null}];
      this.dataList = dataList ? dataList : [];
      // this.findList();
    },
  },
};
</script>

<style lang="scss" scoped>
.pages-tables {
  -webkit-overflow-scrolling: touch; // ios滑动顺畅
  // position: relative;
  // height: 200px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;

  .table-header {
  }
  .table-body {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  table {
    tr {
      height: 48px;
      color: #606266;
      font-size: 14px;
      th,
      td {
        background-image: linear-gradient(#e8eaec, #e8eaec),
          linear-gradient(#e8eaec, #e8eaec);
        background-repeat: no-repeat;
        background-size: 1px 100%, 100% 1px;
        background-position: 100% 0, 100% 100%;

        box-sizing: border-box;

        white-space: pre-line;
        word-break: break-all;
        padding-left: 10px;
        padding-right: 10px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        text-align: left;
      }
    }
    thead {
      tr {
        font-weight: 700;
        background: #f8f8f9;
        th {
        }
      }
    }
    tbody {
      tr {
        background: #fff;
        td {
        }
      }
    }
  }
}
.pages-pager {
  font-size: 12px;
  height: 36px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fff;
  .total {
    font-size: 12px;
    color: #606266;
    margin: 0 0.4em;
  }
  .select {
    width: 7em;
    text-align: center;
    cursor: pointer;
    position: relative;

    font-size: 12px;
    height: 2.15em;
    .select-input {
      width: 100%;
      height: 100%;
      .input {
        width: 100%;
        height: 100%;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        border-radius: 4px;
        text-align: center;
        padding-right: 1.8em;
      }
      .suffix {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        width: 1.6em;
        height: 100%;
        user-select: none;
        align-items: center;
        justify-content: center;
        color: #c0c4cc;
      }
    }

    .select-panel {
      /* display: none; */
      position: absolute;
      left: 0;
      bottom: 26px;
      padding: 4px 0;
      color: #606266;
      text-align: center;
      width: 100%;
      .select-wrapper {
        padding: 4px 0;
        max-height: 200px;
        border-radius: 4px;
        border: 1px solid #dadce0;
        background-color: #fff;
      }
      .select-option {
        padding: 0 10px;
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        user-select: none;

        text-align: center;
        line-height: 24px;
        height: 24px;
      }
      .is-selected {
        background-color: #f5f7fa;
        font-weight: 700;
        color: #409eff;
      }
    }
  }
  .jump {
    width: 155px;
    .is-disabled {
      color: #bfbfbf;
    }
    .prev-btn {
      text-align: center;
      border-radius: 4px;
      margin: 0 0.25em;
      user-select: none;
      background-color: #fff;
      min-width: 2.15em;
      height: 2.15em;
      line-height: 2em;
      display: inline-block;
    }
    .pager-jump {
      margin: 0 0.4em;
      vertical-align: middle;
      display: inline-block;
      .pager-goto {
        width: 3.2em;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-transition: border 0.2s ease-in-out;
        transition: border 0.2s ease-in-out;
        padding: 0 0.4em;
        background-color: #fff;
        height: 2.15em;
        box-sizing: border-box;
      }
    }
    .pager-count {
      text-align: center;
      min-width: 2.15em;
      height: 2.15em;
      line-height: 2em;
      display: inline-block;
      color: #606266;
      font-size: 12px;
      .pager-separator {
        margin-right: 0.2em;
      }
    }
    .next-btn {
      text-align: center;
      border-radius: 4px;
      margin: 0 0.25em;
      user-select: none;
      background-color: #fff;
      min-width: 2.15em;
      height: 2.15em;
      line-height: 2em;
      display: inline-block;
    }
  }
}
</style>