jeecgboot 控件

### JeecgBoot 控件使用教程 #### 表单控件 JeecgBoot 提供了一系列丰富的表单组件来简化前端开发工作。这些组件基于 Ant Design Vue 实现，具有良好的用户体验和强大的功能。 - **Input 输入框** 用于输入文本内容，在 `AntDesignVue` 中对应的组件名为 `a-input`[^1]。 ```vue <template> <a-form-model :model="form"> <a-form-model-item label="用户名"> <a-input v-model="form.username"/> </a-form-model-item> </a-form-model> </template> <script> export default { data() { return { form: { username: '' } }; }, }; </script> ``` - **Select 下拉选择器** 适用于从预定义选项列表中选取一项或多项数据的选择场景，对应于 `a-select` 组件。 ```vue <a-form-model-item label="城市"> <a-select v-model="form.city" placeholder="请选择城市"> <a-select-option value="beijing">北京</a-select-option> <a-select-option value="shanghai">上海</a-select-option> </a-select> </a-form-model-item> ``` #### 数据表格展示 对于复杂的数据展示需求，JeecgBoot 集成了 `a-table` 来处理分页、排序等功能，并支持服务端渲染模式以提高性能表现[^3]。 ```vue <template> <a-table :columns="columns" :data-source="dataSource" row-key="id"></a-table> </template> <script> import { defineComponent } from 'vue'; const columns = [ { title: 'ID', dataIndex: 'id' }, { title: 'Name', dataIndex: 'name' }, ]; export default defineComponent({ setup() { const dataSource = [ { id: 1, name: 'John Brown' }, { id: 2, name: 'Jim Green' }, ]; return { columns, dataSource, }; }, }); </script> ``` 为了获取分页后的数据，可以调用类似如下接口： ```java IPage pageList = jeecgDemoService.page(page, queryWrapper); ``` 此代码片段展示了如何通过 `jeecgDemoService` 的 `page()` 方法传入当前页面参数以及查询条件对象 `queryWrapper` 获取到分页之后的结果集。