浏览代码

feat(searchTerm): 词根管理表格增加排序功能

- 在表格中添加排序功能,支持按添加日期、词根和词根类型列进行排序
- 新增 sortFields 和 isAscending 变量用于存储排序字段和顺序
- 在请求搜索词列表时携带排序参数
- 实现 handleSort 函数以处理排序事件并重新获取数据
WanGxC 6 月之前
父节点
当前提交
254081cdaa
共有 1 个文件被更改,包括 15 次插入5 次删除
  1. 15 5
      src/views/searchTerm/rootWordManage/components/root-word-manage-table.vue

+ 15 - 5
src/views/searchTerm/rootWordManage/components/root-word-manage-table.vue

@@ -53,6 +53,8 @@ const rules = reactive<FormRules<typeof ruleForm>>({
 
 const searchTermTypeFilter = ref('all');
 const searchTermFilter = ref('');
+const sortFields = ref('');
+const isAscending = ref(false);
 const upload = ref<UploadInstance>();
 
 onMounted(() => {
@@ -105,7 +107,9 @@ async function fetchSearchTermList() {
     page: currentPage.value,
     limit: pageSize.value,
     searchTerm: searchTermFilter.value,
-    searchTerm_type: searchTermTypeFilter.value
+    searchTerm_type: searchTermTypeFilter.value,
+    sort_fields: sortFields.value,
+    isAscending: isAscending.value,
   };
   try {
     const response = await api.getSearchTermList(query);
@@ -308,6 +312,12 @@ function handleResponse(response: any) {
     ElMessage.error({ message: response.msg, plain: true });
   }
 }
+
+function handleSort(col: any) {
+  sortFields.value = col.prop;
+  isAscending.value = col.order === 'ascending';
+  fetchSearchTermList();
+}
 </script>
 
 <template>
@@ -361,13 +371,13 @@ function handleResponse(response: any) {
     <!-- 表格 -->
     <el-card shadow="hover" style="border: none">
       <div>
-        <el-table :data="tableData" height="600" stripe style="width: 100%">
+        <el-table :data="tableData" @sort-change="handleSort" height="600" stripe style="width: 100%">
           <el-table-column align="center" type="index" width="60">
             <template #header>
               <span>序号</span>
             </template>
           </el-table-column>
-          <el-table-column align="center" label="添加日期" prop="add_date" sortable>
+          <el-table-column align="center" label="添加日期" prop="add_date" sortable="custom">
             <template #header>
               <el-icon style="top: 2px; margin-right: 3px">
                 <Calendar/>
@@ -378,7 +388,7 @@ function handleResponse(response: any) {
               <span class="font-medium">{{ row.add_date }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="词根" prop="searchTerm" sortable>
+          <el-table-column label="词根" prop="searchTerm" sortable="custom">
             <template #header>
               <el-icon style="top: 2px; right: 2px">
                 <Key/>
@@ -390,7 +400,7 @@ function handleResponse(response: any) {
               <span v-else class="font-semibold">{{ row.searchTerm }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="词根类型" prop="searchTerm_type" sortable>
+          <el-table-column label="词根类型" prop="searchTerm_type" sortable="custom">
             <template #header>
               <el-icon style="top: 2px; right: 2px">
                 <Coin/>