一、搜索框
1、整體架構
<ContentWrap> ... </ContentWrap>
<ContentWrap> 是頁面布局容器（可能是自定義組件），包裹住頁面的內容區域。
2、el-form 表單（搜索區域）
2.1參數
<el-formclass="-mb-15px":model="queryParams"ref="queryFormRef":inline="true"label-width="68px">
</el-form>
?
上面參數 注意兩個即可，一個是?ref="queryFormRef"，一個是?:model="queryParams"
?
這里的參數包含分頁參數、以及實體類參數（芋道特定的六個參數除去、主鍵id除去）?
ref="queryFormRef"：（只和這個重置按鈕有關）
?
當用戶在輸入框中**按下回車鍵（Enter）**時，自動執行
handleQuery()方法。?
?
clearable是一個非常常用的屬性，意思是：讓輸入框右邊顯示一個“清除”按鈕，點一下可以清空內容。
?
2.2按鈕（搜索重置新增導出）
<el-button>....</el-button>
?
?2.2.1 列表
getList
const getList = async () => {loading.value = true // 1?? 開啟 loading 狀態，通常用于顯示加載動畫try {const data = await MessageApi.getMessagePage(queryParams) // 2?? 調用后端接口，傳入查詢參數，等待響應list.value = data.list // 3?? 把返回的數據列表賦值給響應式變量 list，用于頁面渲染total.value = data.total // 4?? 把返回的總條數賦值給 total，用于分頁組件顯示} finally {loading.value = false // 5?? 關閉 loading 狀態，不管請求成功或失敗都會執行}
}
后端分頁返回數據：
?
2.2.2新增導出
?const formRef = ref()：定義了一個響應式引用 formRef，它一般會綁定到子組件（彈窗表單）上，用于操作該組件內部方法。
?2.2.3編輯刪除
和上面一樣
二、總結
主要是
1、</emplate></template>，展示界面（界面又分搜索框、列表框）
2、<script setup lang="ts">?</script>，包括：
? ? ? ? 導包
? ? ? ? 數據
? ? ? ? 查詢列表
? ? ? ? 搜索、重置、添加/編輯、刪除、導出函數
