fix[complex-table]: form header sort icon is out of sync (PanJiaChen#2382)

cnwhy · PanJiaChen · commit 46cc375d0d91 · 2019-07-16T17:12:26.000+08:00
diff --git a/src/views/table/complex-table.vue b/src/views/table/complex-table.vue
@@ -35,7 +35,7 @@
       style="width: 100%;"
       @sort-change="sortChange"
     >
-      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
+      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
@@ -375,6 +375,14 @@ export default {
           return v[j]
         }
       }))
+    },
+    getSortClass: function(key) {
+      const sort = this.listQuery.sort
+      return sort === `+${key}`
+        ? 'ascending'
+        : sort === `-${key}`
+          ? 'descending'
+          : ''
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@`
`35`	`35`	`style="width: 100%;"`
`36`	`36`	`@sort-change="sortChange"`
`37`	`37`	`>`
`38`		`- <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">`
	`38`	`+ <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">`
`39`	`39`	`<template slot-scope="scope">`
`40`	`40`	`<span>{{ scope.row.id }}</span>`
`41`	`41`	`</template>`
`@@ -375,6 +375,14 @@ export default {`
`375`	`375`	`return v[j]`
`376`	`376`	`}`
`377`	`377`	`}))`
	`378`	`+ },`
	`379`	`+ getSortClass: function(key) {`
	`380`	`+ const sort = this.listQuery.sort`
	`381`	+ return sort === `+${key}`
	`382`	`+ ? 'ascending'`
	`383`	+ : sort === `-${key}`
	`384`	`+ ? 'descending'`
	`385`	`+ : ''`
`378`	`386`	`}`
`379`	`387`	`}`
`380`	`388`	`}`