国际化排序更改

src/App.vue

@@ -63,7 +63,7 @@
             " size="mini"></el-input>
           </template>
         </el-table-column>
-        <el-table-column prop="ValueCN" :label="$t('il8n:table:state')" sortable="custom">
+        <el-table-column prop="State" :label="$t('il8n:table:state')" sortable="custom">
           <template slot-scope="scope">
             <el-select v-model="scope.row.State" clearable filterable size="mini">
               <el-option v-for="item of $d.InternationalizationKeyState"
@@ -150,15 +150,21 @@ export default {
   methods: {
     // 排序
     handleSortByColumn(column) {
-      if (column.order === 'ascending') {
+      const { prop, order } = column
-        this.tableData.sort((a, b) =>
+      if (!prop || !order) {
-          a[column.prop].localeCompare(b[column.prop])
+        this.tableData = [...this.tableData]
-        )
+        return
-      } else {
-        this.tableData.sort((a, b) =>
-          b[column.prop].localeCompare(a[column.prop])
-        )
       }
+
+      const collator = new Intl.Collator('zh-Hans-CN', {
+        numeric: true,
+        sensitivity: 'base',
+      })
+
+      this.tableData.sort((a, b) => {
+        const result = collator.compare(a[prop], b[prop])
+        return order === 'ascending' ? result : -result
+      })
     },
     handleStateChange() {
       this.tableData.forEach((item) => {