1. add document; 2. make default-sort-order default to ascending

pull/2182/head
njleonzhang 2017-01-05 12:38:39 +08:00
parent 9ef1faaec9
commit 48a0685ca0
3 changed files with 18 additions and 6 deletions

View File

@ -1122,13 +1122,15 @@ You can also select multiple rows.
Sort the data to find or compare data quickly.
:::demo 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-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.
```html
<template>
<el-table
:data="tableData"
border
style="width: 100%">
style="width: 100%"
default-sort-prop="date"
default-sort-order="descending">
<el-table-column
prop="date"
label="Date"
@ -1453,6 +1455,8 @@ 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-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 |

View File

@ -1139,13 +1139,16 @@
对表格进行排序,可快速查找或对比数据。
:::demo 在列中设置`sortable`属性即可实现以该列为基准的排序,接受一个`Boolean`,默认为`false`。在本例中,我们还使用了`formatter`属性,它用于格式化指定列的值,接受一个`Function`,会传入两个参数:`row`和`column`,可以根据自己的需求进行处理。
:::demo 可以通过表的`default-sort-prop`和`default-sort-order`属性设置默认的排序列和排序顺序。在列中设置`sortable`属性即可实现以该列为基准的排序,接受一个`Boolean`,默认为`false`。在本例中,我们还使用了`formatter`属性,它用于格式化指定列的值,接受一个`Function`,会传入两个参数:`row`和`column`,可以根据自己的需求进行处理。
```html
<template>
<el-table
:data="tableData"
border
style="width: 100%">
style="width: 100%"
default-sort-prop="date"
default-sort-order="descending"
>
<el-table-column
prop="date"
label="日期"
@ -1475,6 +1478,8 @@
| 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-order | 设置默认的排序顺序。需要设置`default-sort-prop`才能使用。 | String | ascending, descending | ascending |
### Table Events
@ -1525,4 +1530,4 @@
| filters | 数据过滤的选项,数组格式,数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |
| filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |
| filter-method | 数据过滤使用的方法,如果是多选的筛选项,对每一条数据会执行多次,任意一次返回 true 就会显示。 | Function(value, row) | — | — |
| filtered-value | 选中的数据过滤项,如果需要自定义表头过滤的渲染方式,可能会需要此属性。 | Array | — | — |
| filtered-value | 选中的数据过滤项,如果需要自定义表头过滤的渲染方式,可能会需要此属性。 | Array | — | — |

View File

@ -150,7 +150,10 @@ export default {
},
border: Boolean,
defaultSortProp: String,
defaultSortOrder: String
defaultSortOrder: {
type: String,
default: 'ascending'
}
},
components: {