zoukankan      html  css  js  c++  java
  • 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;
          });
        },
     
  • 相关阅读:
    iframe,table,window.open求救问题
    你的明星臉~~哈哈~~~(要附正面照片哦==)
    DataGrid的表頭排序問題(GridView雷同了啦)
    致歉(TO师傅)
    程式設計師的著裝(哈哈哈~~~)
    SQL(top与group by)求助
    MySql与超级终端
    hdu 1061 Rightmost Digit
    hdu 2669 Romantic
    poj 1061 青蛙的约会
  • 原文地址:https://www.cnblogs.com/lvlvlv/p/11543575.html
Copyright © 2011-2022 走看看