From 21dab27e0b0bddbec4b6dc0f6785041c98fda5eb Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Tue, 11 Mar 2025 14:11:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 05c5a7ed..564f906f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -62,12 +62,14 @@
         v-adaptive="{ bottomOffset: 50 }"
         height="100"
         style="width: 100%"
+        @sort-change="handleSortByColumn"
       >
         <el-table-column
           prop="Code"
           :label="$t('il8n:table:label')"
           width="300"
           show-overflow-tooltip
+          sortable="custom"
         >
         </el-table-column>
         <!--        <el-table-column-->
@@ -79,7 +81,11 @@
         <!--            {{scope.row.Description}}-->
         <!--          </template>-->
         <!--        </el-table-column>-->
-        <el-table-column prop="Value" :label="$t('il8n:table:en')">
+        <el-table-column
+          prop="Value"
+          :label="$t('il8n:table:en')"
+          sortable="custom"
+        >
           <template slot-scope="scope">
             <el-input
               v-model="scope.row.Value"
@@ -92,7 +98,11 @@
             ></el-input>
           </template>
         </el-table-column>
-        <el-table-column prop="ValueCN" :label="$t('il8n:table:cn')">
+        <el-table-column
+          prop="ValueCN"
+          :label="$t('il8n:table:cn')"
+          sortable="custom"
+        >
           <template slot-scope="scope">
             <el-input
               v-model="scope.row.ValueCN"
@@ -105,7 +115,11 @@
             ></el-input>
           </template>
         </el-table-column>
-        <el-table-column prop="ValueCN" :label="$t('il8n:table:state')">
+        <el-table-column
+          prop="ValueCN"
+          :label="$t('il8n:table:state')"
+          sortable="custom"
+        >
           <template slot-scope="scope">
             <el-select
               v-model="scope.row.State"
@@ -122,7 +136,11 @@
             </el-select>
           </template>
         </el-table-column>
-        <el-table-column prop="Version" :label="$t('il8n:table:Version')">
+        <el-table-column
+          prop="Version"
+          :label="$t('il8n:table:Version')"
+          sortable="custom"
+        >
         </el-table-column>
       </el-table>
       <div style="text-align: right; padding-top: 10px; padding-right: 10px">
@@ -195,6 +213,18 @@ export default {
   //   },
   // },
   methods: {
+    // 排序
+    handleSortByColumn(column) {
+      if (column.order === 'ascending') {
+        this.tableData.sort((a, b) =>
+          a[column.prop].localeCompare(b[column.prop])
+        )
+      } else {
+        this.tableData.sort((a, b) =>
+          b[column.prop].localeCompare(a[column.prop])
+        )
+      }
+    },
     handleStateChange() {
       this.tableData.forEach((item) => {
         item.State = this.State