集成table分页

结合Table组件和Page组件，做了一个简单封装，对后台返回的数据类型有一定要求

image.png

以及请求方式有一定要求，获取数据是GET请求，删除是DELETE，增加是POST

再者你就是引入了ajax

![image.png](https://img.haomeiwen.com/i12996002/c6fcf82d9bc87c1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

在遵循上述条件下，使用起来就比较简单

• 第一步，引入

  
  image.png

• 第二步，配置

<Table
      :columns="columns"
      :url="'/apigw/api'"    // 这是你后台APi接口
      ref="table"
    ></Table>

columns: [
        {
          title: "ID",
          key: "id",
        },
        {
          title: "NAME",
          key: "name",
        },
      ],

如果你要使用请求后的数据，或者对请求参数有改变

image.png

第一个参数是请求参数，第二个是响应回来的数据

<template>
  <Card>
    <Table
      :data="data"
      :columns="columns"
      :stripe="stripe"
      :border="border"
      :show-header="showHeader"
      :loading="loading"
      :disabled-hover="disabledHover"
      :highlight-row="highlightRow"
      :size="size"
      :draggable="draggable"
    >
    </Table>
    <div style="margin: 10px; overflow: hidden">
      <div style="float: right">
        <Page
          show-elevator
          show-sizer
          :total="dataTotal"
          :current="dataCurrent"
          @on-change="changePage"
          @on-page-size-change="changeSize"
        ></Page>
      </div>
    </div>
  </Card>
</template>
<script>
export default {
  props: {
    url: {
      type: String,
    },
    show: {
      type: Function,
      default: function (index) {
        this.$Modal.info({
          title: "User Info",
          content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`,
        });
      },
    },
    remove: {
      type: Function,
      default: function (index) {
        this.data.splice(index, 1);
      },
    },
    columns: {},
    stripe: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabledHover: {
      type: Boolean,
      default: false,
    },
    highlightRow: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
    },
    draggable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    this.columns.push({
      title: "Action",
      key: "action",
      width: 150,
      align: "center",
      render: (h, params) => {
        return h("div", [
          h(
            "Button",
            {
              props: {
                type: "primary",
                size: "small",
              },
              style: {
                marginRight: "5px",
              },
              on: {
                click: () => {
                  this.show(params.index);
                },
              },
            },
            "View"
          ),
          h(
            "Button",
            {
              props: {
                type: "error",
                size: "small",
              },
              on: {
                click: () => {
                  this.remove(params.index);
                },
              },
            },
            "Delete"
          ),
        ]);
      },
    });
    return {
      data: [],
      dataTotal: null, // 页面数据总数
      dataCurrent: 1, // 当前页面记录
      dataSize: 10, // 每个页面显示的条数
    };
  },
  mounted() {
   
  },
  methods: {
    changePage(current) {
      this.dataCurrent = current;
      var that = this;
      this.query(null, function (data) {
        that.data = data.data.data;
      });
    },
    changeSize(dataSize) {
      this.dataSize = dataSize;
      var that = this;
      this.query(null, function (data) {
        that.data = data.data.data;
      });
    },
    query(params, callback) {
      if (!params) {
        params = {
          page: this.dataCurrent,
          pageSize: this.dataSize,
        };
      }
      var that = this;

      that.axios
        .get(that.url, {
          params: params,
        })
        .then(function (res) {
          that.dataTotal = res.data.total;
          that.data = res.data.data;
          if (callback) {
            callback(res);
          }
        });
    },
  },
};
</script>