内置方法

快速请求列表

支持传递以下 GET 参数：
page       当前页码
pagesize   每页显示数量
key        搜索字段

如: /SysApi/Domains.go?pagesize=5&page=1

{
    "code": 200,
    "msg": "列表",
    "data": {
        "items": [{"id": 1,"status": 1}],
        "page": {
            "total": 19,
            "count": 4,
            "curpage": 1
        }
    }
}

使用示例

// 引入接口
const {sysApi,useRequestPage} = api;

// 赋值处理
const p = useRequestPage(
	sysApi.getDomains, // 接口
	{ page: 1, pagesize: 5 },// 请求参数
	{
		dataHandle(e) {
			e.items = e.items.map((e) => {
        // 这里可以对数据做进一步处理
				return e;
			});
			return e;
		},
	}
);

// 监听状态
watch(p.loading, (l) => {
	if (!l) {
		// 请求完成
		if (p.error) {
			console.error('请求失败', p.error);
			p.error = null; // 获取到错误信息后需要重置掉
		}
	}
});

// 分页条点击时会自动发起请求


// 发送搜索
p.search(key)


return {
    listData: p.items,
    listLoading: p.loading,
    listPages: p.pages,
    listChange: p.change,
}

<!-- 表格 -->
<el-table
  :data="listData"
  v-loading="listLoading"
  style="width: 100%"
  size="mini"
  >
  <el-table-column prop="id" label="#"></el-table-column>
</el-table>

<!-- 分页条 -->
<el-pagination
  :total="listPages.total"
  :page-size.sync="listPages.pagesize"
  :current-page.sync="listPages.curpage"
  @current-change="listChange"
  @size-change="listChange"
  background
  layout="prev, pager, next, sizes, total"
></el-pagination>