封装element-ui table(表格)+分页

1.分页的封装

<template>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="current"
    :page-size="size"
    layout="total,prev, pager, next,jumper,sizes"
    :page-sizes="[10, 20, 30, 40, 50]"
    background
    :pager-count="5"
    :total="total"
    @size-change="handleSizeChange"
  >
  </el-pagination>
</template>

<script>
export default {
  name: "EPagenation",
  props: {
    total: {
      default: 0,
      type: Number,
    },
  },
  data() {
    return {
      size: 10,
      current: 1,
    };
  },
  methods: {
    init() {
      this.current = 1;
      this.size = 10;
    },
    handleCurrentChange(val) {
      this.current = val;
      this.$emit("currentPageClick", { nCurrent: val, nSize: this.size });
    },
    handleSizeChange(val) {
      this.size = val;
      this.current = 1;
      this.$emit("currentPageClick", { nCurrent: this.current, nSize: val });
    },
  },
};
</script>

<style lang="scss" scoped>
$color1: #0e90fe;
$color2: rgba(243, 243, 243, 1);
$color3: #fff;
$color4: rgb(244, 244, 244);
$color5: rgba(220, 220, 220, 1);
$color6: #303133;
$radius: 4px;
$color-size: 14px;
.sp-pagination {
  ::v-deep .btn-prev,
  ::v-deep .btn-next {
    border: 1px solid $color5 !important;
    background: center center no-repeat $color4 !important;
    padding-left: 0;
    padding-right: 0;
    padding: 0 8px;
    border-radius: $radius;
    font-size: $color-size;
  }
  ::v-deep .btn-prev:hover,
  ::v-deep .btn-next:hover {
    color: $color1;
  }
  ::v-deep .el-pagination__total {
    margin: 0 10px;
    color: $color6;
    font-size: $color-size;
  }
  ::v-deep .el-pagination__jump {
    margin: 0;
    color: $color6;
    font-size: $color-size;
  }
  ::v-deep .el-pager {
    .number {
      border: 1px solid $color5;
      border-radius: $radius;
      margin: 0 5px;
    }
    .number:hover {
      border: 1px solid $color5;
      color: $color1;
    }
    .active {
      background-color: $color1;
      border: 1px solid $color5;
      color: $color3;
      pointer-events: none;
    }
  }
}
</style>

2.table的封装（这里注意table引入了分页的代码）

<template>
  <div>
    <el-table
      ref="elTable"
      @cell-dblclick="rowDoubleClick"
      @row-click="rowClick"
      @selection-change="$emit('selection-change', $event)"
      class="base-table full-width"
      v-loading="paginationOptions.loading || tableLoading"
      :data="tableListCopy"
      :size="size"
      :border="border"
      :stripe="stripe"
      :default-sort="defaultSort"
      :height="height"
      :show-summary="showSummary"
      :tree-props="treeProps"
      row-key="id"
      highlight-current-row
    >
      <el-table-column
        v-if="selection"
        width="50"
        type="selection"
      ></el-table-column>
      <el-table-column
        v-if="order"
        align="center"
        label="序号"
        :fixed="
          paginationOptions.hasOwnProperty('orderFixed')
            ? paginationOptions.orderFixed
            : false
        "
        width="60"
        type="index"
        :index="indexMethod"
      ></el-table-column>
      <template v-for="(item, index) in columns">
        <el-table-column
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :fixed="item.hasOwnProperty('fixed') ? item.fixed : false"
          :sortable="item.sortable"
          show-overflow-tooltip
          v-if="item.hasOwnProperty('show') ? item.show : true"
        >
          <template slot-scope="{ row }">
            <template v-if="item.clickEnable">
              <el-button @click="$emit('click', row, item)" type="text">
                {
   
   { formatData(item, row) }}
              </el-button>
            </template>
            <template v-else-if="item.render">
              <expand-dom
                :column="item"
                :row="row"
                :render="item.render"
              ></expand-dom>
            </template>
            <template v-else>
              {
   
   { formatData(item, row) }}
            </template>
          </template>
        </el-table-column>
      </template>
      <slot></slot>
    </el-table>
    <el-row v-show="paginationOptions.total > 0" :gutter="20">
      <el-col :span="21" class="pagination-col" :offset="3">
        <EPagination
          class="pagination"
          :total="paginationOptions.total"
          @currentPageClick="currentPageClickHandle"
          ref="epagination"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { format } from "date-fns";
import EPagination from "../EPagination/index";
/**
 * 基础表格
 *
 * @prop {Array} data 表格数据，example：[{ [prop]: String }]
 * @prop {Array} columns 表格栏目
 * - example：[{
 *     prop: String, label: String, width: Number, sortable: Boolean,
 *     clickEnable: Boolean, type: String, dateFormat: String, formatter: Function
 *   }]
 * - sortable 是否排序
 * - clickEnable 是否可点击，会触发表格的 click 事件，详情见下面的 click 事件
 * - type 数据类型，date 为时间戳 dic为字典
 * - dateFormat 时间转换格式， 默认 'yyyy-MM-dd HH:mm:ss'
 * - formatter(value) 格式化单元格数据，参数为当前单元格数据，需返回展示的内容
 *
 * @prop {Boolean} border 是否有边框，默认无
 * @prop {Boolean} stripe 是否斑马条纹，默认有
 * @prop {String} size 表格大小，默认 mini
 * @prop {Boolean} order 是否有序号，默认无
 * @prop {Object} defaultSort 默认排序，example：{ prop: 'area', order: 'descending' }
 * @prop {String} height 表格高度
 * @prop {Boolean} showSummary 是否展示总计行，默认 false
 * @prop {Boolean} selection 是否展示复选框，默认 false
 * @prop {Object} treeProps 树形菜单的 props 对应参数，默认 { children: 'children' }
 *
 * @event selection-change 复选框勾选事件
 * @event click(data, column) 栏目点击事件，data 当前行的数据，column 当前栏目的数据
 * @event row-click(row, column, cell, event 行点击事件
 *
 * @method setCurrentRow(row) 设置当前行
 */
export default {
  props: {
    datas: {
      type: Array,
      default: () => {
        return [];
      },
    },
    columns: Array,
    border: {
      type: Boolean,
      default: false,
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: "small",
    },
    tableLoading: {
      type: Boolean,
      default: false,
    },
    defaultSort: Object,
    height: {
      type: String,
      default: "auto",
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    order: {
      type: Boolean,
      default: true,
    },
    selection: {
      type: Boolean,
      default: false,
    },
    // showPagation: {
    //   type: Boolean,
    //   default: true,
    // },
    treeProps: {
      type: Object,
      default() {
        return { children: "children" };
      },
    },
    options: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    expandDom: {
      functional: false,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: function (h) {
        return this.render(h, this.row);
      },
    },
    EPagination,
  },
  data() {
    return {
      optionsDefault: {
        total: 0,
        pageSize: 10,
        current: 1,
        loading: false,
      },
      tableListCopy: this.data,
    };
  },
  created() {
    // console.log(this.tableListCopy);
  },
  computed: {
    paginationOptions: {
      get: function () {
        const temp = Object.assign({}, this.optionsDefault);
        for (const index in this.options) {
          temp[index] = this.options[index];
        }
        return temp;
      },
      set: function (obj) {
        this.optionsDefault = Object.assign(this.optionsDefault, obj);
      },
    },
  },
  methods: {
    // 单元格数据格式化
    formatData(column, row) {
      const value = row[column.prop];
      if (value) {
        if (column.type === "date") {
          return format(value, column.dateFormat || "yyyy-MM-dd HH:mm:ss");
        } else if (column.formatter instanceof Function) {
          return column.formatter(value, row);
        } else {
          return value;
        }
      } else {
        return value;
      }
    },

    // 双击事件
    rowDoubleClick(row, column, cell, event) {
      this.$emit("cell-dblclick", row, column, cell, event);
    },

    // 表格行点击事件
    rowClick(row, column, cell, event) {
      this.$emit("row-click", row, column, cell, event);
    },

    // 设置当前行
    setCurrentRow(row) {
      this.$refs.elTable.setCurrentRow(row);
    },

    toggleSelection(row) {
      this.$refs.elTable.toggleRowSelection(row);
    },
    // 清空勾选
    clearSelection() {
      this.$refs.elTable.clearSelection();
    },
    // 分页查询
    currentPageClickHandle(val) {
      this.paginationOptions.current = val.nCurrent;
      this.paginationOptions.pageSize = val.nSize;
      this.$emit("afterCurrentPageClick", val, function () {});
    },
    setPageInit() {
      this.$refs.epagination.init();
    },
    // table数据赋值
    setPageInfo(current, total, tableList) {
      this.paginationOptions.current = current;
      this.paginationOptions.total = total;
      this.tableListCopy = tableList;
    },
    // 分页index++
    indexMethod(index) {
      return (
        (this.paginationOptions.current - 1) * this.paginationOptions.pageSize +
        index +
        1
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination-col {
  margin-top: 20px;
  margin-bottom: 20px;

  .pagination {
    text-align: center;
  }
}
::v-deep .el-table {
  border-top: 1px solid rgba(241, 241, 241, 1);
  border-bottom: 1px solid rgba(241, 241, 241, 1);

  th {
    background-color: rgba(218, 222, 226) !important;
    height: 53px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: Microsoft YaHei !important;
    color: #444444 !important;
  }

  .el-table__row--striped td {
    background-color: rgba(245, 246, 247, 1) !important;
  }

  //用来设置当前页面element全局table,hover某行时的背景色
  .el-table__body tr.hover-row > td {
    background-color: #e7f3ff !important;
    // color: white;
    color: rgba(61, 145, 246, 1);
  }
  // 用来设置当前页面element全局table 选中某行时的背景色
  .el-table__body tr.current-row > td {
    background-color: #e7f3ff !important;
    color: rgba(61, 145, 246, 1);
  }
}
</style>

3.现在就要在你想要表格的页面引入这个封装好的table了

<template>
 <div>
 <Basetables
      ref="zzllks"
      :height="'574px'"
      :order="true"
      :tableLoading="tableLoading"
      :columns="jlhbColumns"
      @selection-change="selsChange"
      @afterCurrentPageClick="afterCurrentPageClickHandle"
    >
      <el-table-column
        label="订单状态"
        prop="result"
        align="center"
        width="80px"
      >
        <template slot-scope="scope">
          {
   
   { transition[scope.row.orderStatus] }}</template
        >
      </el-table-column>
      <el-table-column
        label="操作"
        prop="result"
        fixed="right"
        align="center"
        width="100px"
      >
        <template slot-scope="{ row }">
          <el-button
            size="small"
            type="danger"
            v-show="row.orderStatus == 2"
            v-hasPermi="['order:store:orderRefund']"
            @click="whereaboutsoftheorder(row)"
            >退单</el-button
          >
          <el-button
            type="info"
            size="small"
            disabled
            style="margin-left: 0"
            v-hasPermi="['order:store:orderRefund']"
            v-show="row.orderStatus !== 2"
            @click="orders(row)"
            >退单</el-button
          >
        </template>
      </el-table-column>
    </Basetables>
</div>
</template>
// 注意上面的订单状态是后端给我们数字我们要转文字的

<script>
import Basetables from "../../components/base-tables";
export default{
 components: {
    Basetables
  },
data(){
   return {
    tableLoading:false,  // 表格loading
     jlhbColumns: [
        {
          prop: "orderNum",
          label: "订单号",
          align: "center",
          width: "180px",
        },
        {
          prop: "orderMoney",
          label: "订单金额",
          align: "center",
        },
        {
          prop: "createTime",
          label: "下单时间",
          align: "center",
          width: "180px",
        },
        {
          prop: "realName",
          label: "下单人",
          align: "center",
        },
        {
          prop: "orderDesc",
          label: "套餐名称",
          align: "center",
          width: "150px",
        },
        {
          prop: "serviceShopName",
          label: "服务门店名称",
          align: "center",
        },
        {
          prop: "nature",
          label: "门店性质",
          align: "center",
          render: (h, row) => {
            const { nature } = row;
            let text = "";
            switch (nature) {
              case 1:
                text = "直营";
                break;
              case 2:
                text = "加盟";
                break;
            }
            return h("span", text);
          },
           // 这里是后端给我们数字我们转文字
      ],  
  }
    }
 created() {
    this.getList();  // 表格数据请求
  },

methods:{
    getList() {
      this.tableLoading = true; // 打开表格loading
      listmatters(this.queryParams) // 表格接口请求
        .then((res) => {
          if (res.code == 200) {
            let current = this.queryParams.pageNum; 
            let total = res.total;
            let data = res.rows;
            this.$refs.zzllks.setPageInfo(current, total, data); //请求到的的data数据和总数分页等传入上面封装的表格table里面
          }
        })
        .finally(() => {
          this.tableLoading = false;  // 这里关闭loading
        });
    },
 // 分页查询
    afterCurrentPageClickHandle(val) {
      this.elseParams.pageNum = val.nCurrent;
      this.elseParams.pageSize = val.nSize;
      this.getList();
    },
// 这里删除第二页最后一条他不会跳到第一页，懂得都懂，我都替你们想好了

// 删除
delete（）{
    这里接口调用我就不写了成功之后调用以下方法就可以了
const totalPage = Math.ceil(
              (this.totalSensitive - 1) / this.queryParams.pageSize
            );
            this.queryParams.pageNum =
              this.queryParams.pageNum > totalPage
                ? totalPage
                : this.queryParams.pageNum;
            this.queryParams.pageNum =
              this.queryParams.pageNum < 1 ? 1 : this.queryParams.pageNum;
            this.listNoapprovaln();  // 重新刷新页面
      }

// 批量审批
 selsChange(sels) {
      this.sels = sels;
      this.selsId = [];
      this.sels.map((item) => {
        this.selsId.push(item.id);
      });
    },
}
 }
</script>

4.以上table(表格) +分页，想要element-ui表单查询的封装点击我主页查看是配合这个table表格的