• 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;
          });
        },
     
  • 相关阅读:
    spring-base.xml
    计算和证明施密特正交,写的很清楚
    推理
    存在某种关系时,推理存在新关系
    PyCharm 技巧
    3#记录
    2#记录
    一文揭秘!自底向上构建知识图谱全过程
    1#记录
    本体建模小结
  • 原文地址:https://www.cnblogs.com/lvlvlv/p/11543575.html
Copyright © 2020-2023  润新知