Day06_商品分类(vuetify-nginx-cors)与品牌查询 (11)

网络监视：

resp到底都有那些数据，查看控制台结果：

可以看到，在请求成功的返回结果response中，有一个data属性，里面就是真正的响应数据。

响应结果中与我们设计的一致，包含3个内容：

total：总条数，目前是165

items：当前页数据

totalPage：总页数，我们没有返回

6.3.完成分页和过滤 6.3.1.分页

点击分页，会发起请求，通过浏览器工具查看，会发现pagination对象的属性一直在变化：

我们可以利用Vue的监视功能：watch，当pagination发生改变时，会调用我们的回调函数，我们在回调函数中进行数据的查询！

具体实现：

成功实现分页功能：

6.3.2.过滤

过滤字段对应的是search属性，我们只要监视这个属性即可:

查看网络请求：

页面结果：

树组件的用法 1.1.示例 <v-tree url="/item/category/list" :isEdit="true" @handleAdd="handleAdd" @handleEdit="handleEdit" @handleDelete="handleDelete" @handleClick="handleClick" />

效果：

1.2.属性列表 属性名称 说明 数据类型 默认值
url   用来加载数据的地址，即延迟加载   String   -  
isEdit   是否开启树的编辑功能   boolean   false  
treeData   整颗树数据，这样就不用远程加载了   Array   -  

这里推荐使用url进行延迟加载，每当点击父节点时，就会发起请求，根据父节点id查询子节点信息。

当有treeData属性时，就不会触发url加载

远程请求返回的结果格式：

[ { "id": 74, "name": "手机", "parentId": 0, "isParent": true, "sort": 2 }, { "id": 75, "name": "家用电器", "parentId": 0, "isParent": true, "sort": 3 } ] 1.3.事件： 事件名称 说明 回调参数
handleAdd   新增节点时触发，isEdit为true时有效   新增节点node对象，包含属性：name、parentId和sort  
handleEdit   当某个节点被编辑后触发，isEdit为true时有效   被编辑节点的id和name  
handleDelete   当删除节点时触发，isEdit为true时有效   被删除节点的id  
handleClick   点击某节点时触发   被点击节点的node对象,包含全部信息  
1.4.完整node的信息