1) ElementUI

安装

npm install element-ui -S

引入组件

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(Element)

测试，在自己的组件中使用 ElementUI 的组件

按钮

表格组件

分页组件

• 三种情况都应该触发查询
  • mounted 组件挂载完成后
  • 页号变化时
  • 页大小变化时
• 查询传参应该根据后台需求，灵活采用不同方式
  • 本例中因为是 get 请求，无法采用请求体，只能用 params 方式传参
• 返回响应的格式也许会很复杂，需要掌握【根据返回的响应结构，获取数据】的能力

分页搜索

• sex 与 age 均用 '' 表示用户没有选择的情况
• age 取值 0,20 会被 spring 转换为 new int[]{0, 20}
• age 取值 '' 会被 spring 转换为 new int[0]

级联选择

级联选择器中选项的数据结构为

[{value:100, label:'主页',children:[{value:101, label:'菜单1', children:[{value:105, label:'子项1'},{value:106, label:'子项2'}]},{value:102, label:'菜单2', children:[{value:107, label:'子项3'},{value:108, label:'子项4'},{value:109, label:'子项5'}]},{value:103, label:'菜单3', children:[{value:110, label:'子项6'},{value:111, label:'子项7'}]},{value:104, label:'菜单4'}]}
]

下面的例子是将后端返回的一维数组【树化】