vue+el-table实现前端假分页

vue+el-table实现前端假分页

<template>
  <div class="component-container">
    <!-- 带假分页的简易表格 -->
    <el-table
      :data="tableData"
      stripe
      :header-cell-style="{ color: '#333333' }"
      style="width: 100%"
    >
      <el-table-column
        v-if="showIndex"
        width="80"
        prop="cusIndex"
        label="ID"
        align="center"
      ></el-table-column>
      <template v-for="(item, index) in columnData">
        <el-table-column
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width ? item.width : 'auto'"
          align="center"
        ></el-table-column>
      </template>
    </el-table>
    <div class="pagination" v-if="sourceData && sourceData.length > size">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="sourceData ? sourceData.length : 0"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "EasyTableComponent",
  props: {
    // 数据源
    sourceData: {
      type: Array,
      default() {
        return [];
      },
    },
    // 列头
    columnData: {
      type: Array,
      default() {
        return [];
      },
    },
    size: {
      // 每页的个数
      type: Number,
      default: 20,
    },
    showIndex: {
      // 是否显示index
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      page: 1, // 页码
      perSize: 0,
      tableData: [], // 表格显示的数据
    };
  },
  watch: {
    // 监听数据源变化
    sourceData: {
      handler(val, oldVal) {
        this.page = 1;
        this.renderTable();
      },
      deep: true,
    },
  },
  mounted() {
    this.perSize = this.size;
  },
  methods: {
    handleSizeChange(size) {
      this.perSize = size;
      this.renderTable();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.renderTable();
    },
    /**
     * 渲染表格
     */
    renderTable() {
      this.tableData = [];
      if (this.sourceData === null) {
        return;
      }
      if (this.page < 1) {
        this.page = 1;
      }
      let start = this.perSize * (this.page - 1);
      let end = this.perSize * this.page;
      for (let i = start; i < end; i++) {
        if (i < end) {
          if (this.sourceData[i]) {
            this.sourceData[i].cusIndex = i+1;
            this.tableData.push(this.sourceData[i]);
          } else {
            break;
          }
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.pagination {
  text-align: left;
  margin: 10px 0 0;
}
</style>

使用：

<easy-table-component
  :sourceData="formData.statisticalResults"
  :columnData="[
    { prop: 'batchUuid', label: 'ID' },
    { prop: 'containerType', label: 'containerType' },
    { prop: 'quantity', label: 'Rack Quantity' },
    { prop: 'vailQuantity', label: 'Compound Quantity' },
  ]"
  :size="5"
  @update:size="size = $event"
></easy-table-component>

效果：