一、搜索框
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>，包括：
导包
数据
查询列表
搜索、重置、添加/编辑、删除、导出函数
