Merge branch 'master' into deploy

build/webpack.prod.conf.js

@@ -9,7 +9,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-// const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 function resolve(dir) {
@@ -140,7 +140,7 @@ const webpackConfig = merge(baseWebpackConfig, {
       }),
       // Compress extracted CSS. We are using this plugin so that possible
       // duplicated CSS from different components can be deduped.
-      // new OptimizeCSSAssetsPlugin()
+      new OptimizeCSSAssetsPlugin()
     ]
   }
 })

src/views/table/complexTable.vue

@@ -24,8 +24,9 @@
       border
       fit
       highlight-current-row
-      style="width: 100%;">
+      style="width: 100%;"
-      <el-table-column :label="$t('table.id')" align="center" width="65">
+      @sort-change="sortChange">
+      <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="65">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
@@ -233,6 +234,20 @@ export default {
       })
       row.status = status
     },
+    sortChange(data) {
+      const { prop, order } = data
+      if (prop === 'id') {
+        this.sortByID(order)
+      }
+    },
+    sortByID(order) {
+      if (order === 'ascending') {
+        this.listQuery.sort = '+id'
+      } else {
+        this.listQuery.sort = '-id'
+      }
+      this.handleFilter()
+    },
     resetTemp() {
       this.temp = {
         id: undefined,