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;
          });
        },
     
  • 相关阅读:
    XML基础(二)
    XML基础(一)
    转载:数据库应用开发工具Toad使用笔记
    Oracle数据库获取一行记录中某几个字段的最大值/最小值函数
    设置Android让EditText不自动获取焦点
    android TextView selector点击样式改变
    Jenkins build java app under redhat
    Yum
    git windows
    jenkins redhat installation using war file .
  • 原文地址:https://www.cnblogs.com/lvlvlv/p/11543575.html
Copyright © 2011-2022 走看看