分页查询部分页面的排序

src/views/biosafety/deworm/index.vue

@@ -27,7 +27,8 @@
     </el-row>
 
     <!-- 3. 列表 -->
-    <el-table v-loading="loading" :data="dewormList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="dewormList" @selection-change="handleSelectionChange"
+      @sort-change="handleSortChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="驱虫日期" align="center" prop="datetime" width="180">
         <template #default="scope">{{ parseTime(scope.row.datetime, '{y}-{m}-{d}') }}</template>
@@ -40,8 +41,8 @@
           <dict-tag :options="sheep_gender" :value="scope.row.gender" />
         </template>
       </el-table-column>
-      <el-table-column label="月龄" align="center" prop="monthAge" />
-      <el-table-column label="胎次" align="center" prop="parity" />
+      <el-table-column label="月龄" align="center" prop="monthAge" sortable="custom" />
+      <el-table-column label="胎次" align="center" prop="parity" sortable="custom" />
       <el-table-column label="繁殖状态" align="center" prop="breed" />
       <el-table-column label="技术员" align="center" prop="technical" />
       <el-table-column label="备注" align="center" prop="comment" />
@@ -54,7 +55,7 @@
     </el-table>
 
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize" @pagination="getList" />
+      v-model:limit="queryParams.pageSize" :page-sizes="[20, 50, 100, 200, 500, 1000, 2000]" @pagination="getList" />
 
     <!-- 4. 新增弹窗（羊舍多选 + 无卡片 + 自动剔除） -->
     <el-dialog title="新增驱虫记录" v-model="addOpen" width="60%" top="5vh" append-to-body>
@@ -297,9 +298,11 @@
 
   const queryParams = reactive({
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 20,
     sheepNo: null,
-    technical: null
+    technical: null,
+    orderByColumn: null,   // 新增
+    isAsc: null            // 新增
   })
 
   const ids = ref([])
@@ -327,6 +330,17 @@
     multiple.value = !selection.length
   }
 
+  function handleSortChange({ prop, order }) {
+    if (!order) {   // 取消排序
+      queryParams.orderByColumn = null
+      queryParams.isAsc = null
+    } else {
+      queryParams.orderByColumn = prop   // monthAge 或 parity
+      queryParams.isAsc = order === 'ascending' ? 'asc' : 'desc'
+    }
+    getList()
+  }
+
   function handleQuery() {
     queryParams.pageNum = 1
     getList()