vue ant design a-table 的分页

      <a-table         :columns="columns"       //列         :dataSource="tableDatas"  //数据         :loading="loading"         :pagination="pagination"  //分页属性         @change="handleTableChange"//点击分页中数字时触发的方法         :rowKey="tableDatas => tableDatas.id"    //每一行的标识       >         <span slot="action" slot-scope="text, record">  //放表格中操作的按钮           <div class="tabBtn" >             <a-popover placement="bottomRight" overlayClassName="tableBtn">               <template slot="title">                 <a href="javascript:;" @click="handleAdd(record)" >                   <i class="iconfont icon-table-edit" />编辑                 </a>                 <a href="javascript:;" @click="deleHostData(record)">                   <i class="iconfont icon-tableEmpty" />删除                 </a>               </template>               <span>                 <i class="iconfont icon-tableMore" />               </span>             </a-popover>           </div>         </span>       </a-table>

//data中的数据data() {     return {       pagination: {         total: 0,         pageSize: 10,//每页中显示10条数据         showSizeChanger: true,         pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据         showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据       },        loading: true,       // 查询参数       queryParam: {         page: 1,//第几页         size: 10,//每页中显示数据的条数         hosName: "",         hosCode: "",         province: "",         city: ""       },     };

    handleTableChange(pagination) {       this.pagination.current = pagination.current;       this.pagination.pageSize = pagination.pageSize;       this.queryParam.page = pagination.current;       this.queryParam.size = pagination.pageSize;       this.getTableList();     },//调用查询接口为dataSource 赋值

getTableList() {

this.loading = true;

retriveHosData(this.queryParam).then(res => {

if (res.message === "SUCCESS") {

const pagination = { ...this.pagination };

pagination.total = res.data.total;

this.tableDatas = res.data.list;

this.pagination = pagination;

}

this.loading = false;

});

来源：博客园

作者：无忧lv

链接：https://www.cnblogs.com/lvlvlv/p/11543575.html

标签

pagination

分页

vue