Merge pull request #2405 from njleonzhang/revise_table_sort_api

revise table default sort api

examples/docs/en-US/table.md

@@ -1122,15 +1122,14 @@ You can also select multiple rows.
 
 Sort the data to find or compare data quickly.
 
-:::demo Set table attribute `default-sort-prop` and `default-sort-order` to determine default sort column and order. Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
+:::demo Set table attribute `default-sort` to determine default sort column and order. Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
 ```html
 <template>
   <el-table
     :data="tableData"
     border
-    style="width: 100%"
+    :default-sort = "{prop: 'date', order: 'descending'}"
-    default-sort-prop="date"
+    style="width: 100%">
-    default-sort-order="descending">
     <el-table-column
       prop="date"
       label="Date"
@@ -1455,8 +1454,7 @@ When the row content is too long and you do not want to display the horizontal s
 | empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
 | default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
 | expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | |
-| default-sort-prop | set the `prop` of default sort column. | String | - | - |
+| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
-| default-sort-order | set the default sort order. You should set `default-sort-prop` before using this prop. | String | ascending, descending | ascending |
 
 ### Table Events
 | Event Name | Description | Parameters |

examples/docs/zh-CN/table.md

@@ -1139,15 +1139,14 @@
 
 对表格进行排序，可快速查找或对比数据。
 
-:::demo 可以通过表的`default-sort-prop`和`default-sort-order`属性设置默认的排序列和排序顺序。在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
+:::demo 可以通过表的`default-sort`属性设置默认的排序列和排序顺序。在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
 ```html
 <template>
   <el-table
     :data="tableData"
     border
     style="width: 100%"
-    default-sort-prop="date"
+    :default-sort = "{prop: 'date', order: 'descending'}"
-    default-sort-order="descending"
     >
     <el-table-column
       prop="date"
@@ -1158,6 +1157,7 @@
     <el-table-column
       prop="name"
       label="姓名"
+      sortable
       width="180">
     </el-table-column>
     <el-table-column
@@ -1478,9 +1478,7 @@
 | empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | — | 暂无数据 |
 | default-expand-all | 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false |
 | expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |
-| default-sort-prop | 默认的排序列的prop。| String | - | - |
+| default-sort | 默认的排序列的prop和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序| Object | `order`: ascending, descending | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending |
-| default-sort-order | 设置默认的排序顺序。需要设置`default-sort-prop`才能使用。 | String | ascending, descending | ascending |
-
 
 ### Table Events
 | 事件名 | 说明 | 参数 |

packages/table/src/table-header.js

@@ -151,10 +151,14 @@ export default {
       required: true
     },
     border: Boolean,
-    defaultSortProp: String,
+    defaultSort: {
-    defaultSortOrder: {
+      type: Object,
-      type: String,
+      default() {
-      default: 'ascending'
+        return {
+          prop: '',
+          order: ''
+        };
+      }
     }
   },
 
@@ -190,16 +194,15 @@ export default {
   },
 
   mounted() {
-    if (this.defaultSortProp) {
+    if (this.defaultSort.prop) {
       const states = this.store.states;
-      states.sortProp = this.defaultSortProp;
+      states.sortProp = this.defaultSort.prop;
-      states.sortOrder = this.defaultSortOrder;
+      states.sortOrder = this.defaultSort.order || 'ascending';
-
       this.$nextTick(_ => {
         for (let i = 0, length = this.columns.length; i < length; i++) {
           let column = this.columns[i];
-          if (column.property === this.defaultSortProp) {
+          if (column.property === states.sortProp) {
-            column.order = this.defaultSortOrder;
+            column.order = states.sortOrder;
             states.sortingColumn = column;
             break;
           }

packages/table/src/table.vue

@@ -15,8 +15,7 @@
         :store="store"
         :layout="layout"
         :border="border"
-        :default-sort-prop="defaultSortProp"
+        :default-sort="defaultSort"
-        :default-sort-order="defaultSortOrder"
         :style="{ width: layout.bodyWidth ? layout.bodyWidth + 'px' : '' }">
       </table-header>
     </div>
@@ -170,9 +169,7 @@
 
       defaultExpandAll: Boolean,
 
-      defaultSortProp: String,
+      defaultSort: Object
-
-      defaultSortOrder: String
     },
 
     components: {