github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: sort arrow nostalgia

pull/8194/head
Leopoldthecoder 2017-11-12 20:14:26 +08:00 committed by 杨奕
parent 8fa549894b
commit 9611079d4d
2 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/table/src/table-header.js
View File

@ -119,12 +119,10 @@ export default {
{
column.sortable
? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
<span class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
<i class="el-icon-sort-up"></i>
</span>
<span class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
<i class="el-icon-sort-down"></i>
</span>
<i class="sort-caret ascending el-icon-caret-top" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
</i>
<i class="sort-caret descending el-icon-caret-bottom" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
</i>
</span>
: ''
}

23
packages/theme-chalk/src/table.scss
View File

@ -426,20 +426,29 @@
}
.caret-wrapper {
position: relative;
display: inline-flex;
align-items: center;
height: 13px;
width: 24px;
position: absolute;
display: inline-block;
height: 100%;
vertical-align: middle;
cursor: pointer;
overflow: initial;
}
.sort-caret {
color: $--icon-color-base;
color: $--color-text-placeholder;
width: 14px;
overflow: hidden;
font-size: 13px;
font-size: 15px;
position: absolute;
left: 4px;
&.ascending {
top: 1px;
}
&.descending {
bottom: 1px;
}
}
.ascending .sort-caret.ascending {