mirror of https://github.com/ElemeFE/element
baiyaaaaa
GitHub
commit
ad2a32dcd6
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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 | — | — |
|
||||
|
|
|
|||
|
|
@ -114,9 +114,9 @@ export default {
|
|||
}
|
||||
{
|
||||
column.sortable
|
||||
? <span class="caret-wrapper">
|
||||
<i class="sort-caret ascending" on-click={ ($event) => this.handleHeaderClick($event, column, 'ascending')}></i>
|
||||
<i class="sort-caret descending" on-click={ ($event) => this.handleHeaderClick($event, column, 'descending')}></i>
|
||||
? <span class="caret-wrapper" on-click={ ($event) => this.handleHeaderClick($event, column) }>
|
||||
<i class="sort-caret ascending"></i>
|
||||
<i class="sort-caret descending"></i>
|
||||
</span>
|
||||
: ''
|
||||
}
|
||||
|
|
@ -150,7 +150,12 @@ export default {
|
|||
layout: {
|
||||
required: true
|
||||
},
|
||||
border: Boolean
|
||||
border: Boolean,
|
||||
defaultSortProp: String,
|
||||
defaultSortOrder: {
|
||||
type: String,
|
||||
default: 'ascending'
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
|
|
@ -184,6 +189,23 @@ export default {
|
|||
this.filterPanels = {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const states = this.store.states;
|
||||
states.sortProp = this.defaultSortProp;
|
||||
states.sortOrder = this.defaultSortOrder;
|
||||
|
||||
this.$nextTick(_ => {
|
||||
for (let i = 0, length = this.columns.length; i < length; i++) {
|
||||
if (this.columns[i].property === this.defaultSortProp) {
|
||||
this.columns[i].order = this.defaultSortOrder;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.store.commit('changeSortCondition');
|
||||
});
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
const panels = this.filterPanels;
|
||||
for (let prop in panels) {
|
||||
|
|
@ -336,7 +358,16 @@ export default {
|
|||
document.body.style.cursor = '';
|
||||
},
|
||||
|
||||
handleHeaderClick(event, column, order) {
|
||||
toggleOrder(column) {
|
||||
if (column.order === 'ascending') {
|
||||
return 'descending';
|
||||
}
|
||||
return 'ascending';
|
||||
},
|
||||
|
||||
handleHeaderClick(event, column) {
|
||||
let order = this.toggleOrder(column);
|
||||
|
||||
let target = event.target;
|
||||
while (target && target.tagName !== 'TH') {
|
||||
target = target.parentNode;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
:store="store"
|
||||
:layout="layout"
|
||||
:border="border"
|
||||
:default-sort-prop="defaultSortProp"
|
||||
:default-sort-order="defaultSortOrder"
|
||||
:style="{ width: layout.bodyWidth ? layout.bodyWidth + 'px' : '' }">
|
||||
</table-header>
|
||||
</div>
|
||||
|
|
@ -166,7 +168,11 @@
|
|||
|
||||
expandRowKeys: Array,
|
||||
|
||||
defaultExpandAll: Boolean
|
||||
defaultExpandAll: Boolean,
|
||||
|
||||
defaultSortProp: String,
|
||||
|
||||
defaultSortOrder: String
|
||||
},
|
||||
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -1105,9 +1105,9 @@ describe('Table', () => {
|
|||
});
|
||||
|
||||
setTimeout(_ => {
|
||||
const elm = vm.$el.querySelector('.caret-wrapper > .ascending');
|
||||
|
||||
const elm = vm.$el.querySelector('.caret-wrapper');
|
||||
elm.click();
|
||||
|
||||
setTimeout(_ => {
|
||||
const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
|
||||
expect(toArray(lastCells).map(node => node.textContent)).to.eql(['100', '95', '92', '92', '80']);
|
||||
|
|
@ -1143,7 +1143,7 @@ describe('Table', () => {
|
|||
const vm = createTable('', '', '', 'sortable');
|
||||
|
||||
it('ascending', done => {
|
||||
const elm = vm.$el.querySelector('.caret-wrapper > .ascending');
|
||||
const elm = vm.$el.querySelector('.caret-wrapper');
|
||||
|
||||
elm.click();
|
||||
setTimeout(_ => {
|
||||
|
|
@ -1155,7 +1155,7 @@ describe('Table', () => {
|
|||
});
|
||||
|
||||
it('descending', done => {
|
||||
const elm = vm.$el.querySelector('.caret-wrapper > .descending');
|
||||
const elm = vm.$el.querySelector('.caret-wrapper');
|
||||
|
||||
elm.click();
|
||||
setTimeout(_ => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue