自定義列表查詢 · JeecgBoot Vue3前端文檔

## 自定義查詢當封裝的BaseForm的搜索無法滿足實際業務需求時可以使用antd vue 原生form對象進行頁面布局具體用法參考[Form用法](https://2x.antdv.com/components/form-cn) 1.配合BasicTable用法示例 ~~~ <div>  <div class="jeecg-basic-table-form-container" @keyup.enter="searchQuery"> <a-form :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> <a-row :gutter="24"> <a-col :lg="8"> <a-form-item label="用戶名"> <a-input placeholder="請輸入名稱模糊查詢" v-model:value="queryParam.name"></a-input> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item label="年齡"> <a-input placeholder="最小年齡" type="ge" v-model:value="queryParam.age_begin" style="width:calc(50% - 15px);"></a-input> <span>~</span> <a-input placeholder="最大年齡" type="le" v-model:value="queryParam.age_end" style="width:calc(50% - 15px);"></a-input> </a-form-item> </a-col> <template v-if="toggleSearchStatus"> <a-col :lg="8"> <a-form-item label="性別"> <JDictSelectTag v-model:value="queryParam.sex" placeholder="請選擇性別" dictCode="sex"/> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item label="選擇用戶"> <JDictSelectTag v-model:value="queryParam.id" placeholder="請選擇用戶" dictCode="demo,name,id"/> </a-form-item> </a-col> </template> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <a-col :lg="6"> <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查詢</a-button> <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> {{ toggleSearchStatus ? '收起' : '展開' }} <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'"/> </a> </a-col> </span> </a-row> </a-form> </div> <BasicTable @register="registerTable" :rowSelection="rowSelection"> 省略 ...... </BasicTable> <script lang="ts" setup> 省略....... //-----自定義查詢----begin-------- const labelCol = reactive({ xs: {span: 24}, sm: {span: 7}, }) const wrapperCol = reactive({ xs: {span: 24}, sm: {span: 16}, }) const toggleSearchStatus = ref(false); const queryParam = reactive({ name: '', age_begin: '', age_end: '', sex: '', id: '', }); function searchQuery(){ setProps({searchInfo:toRaw(queryParam)}); reload() } function searchReset(){ Object.assign(queryParam,{ name: '',age_begin: '',age_end: '',sex: '',id: ''}); reload(); } //自定義查詢----end--------- </script> ~~~