diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue index 65ee8c3..182cb65 100644 --- a/src/components/table/table-body.vue +++ b/src/components/table/table-body.vue @@ -5,7 +5,7 @@
- +
@@ -57,6 +63,12 @@ selectAll () { const status = !this.isSelectAll; this.$parent.selectAll(status); + }, + handleSortAsc (index) { + this.$parent.handleSort(index, 'asc'); + }, + handleSortDesc (index) { + this.$parent.handleSort(index, 'desc'); } } } diff --git a/src/components/table/table.vue b/src/components/table/table.vue index 4479d00..b789eba 100644 --- a/src/components/table/table.vue +++ b/src/components/table/table.vue @@ -14,7 +14,6 @@ :prefix-cls="prefixCls" :style="tableStyle" :columns="cloneColumns" - :data="data" :clone-data="cloneData">
@@ -32,7 +31,6 @@ :prefix-cls="prefixCls" :style="fixedTableStyle" :columns="leftFixedColumns" - :data="data" :clone-data="cloneData">
@@ -51,7 +49,6 @@ :prefix-cls="prefixCls" :style="fixedRightTableStyle" :columns="rightFixedColumns" - :data="data" :clone-data="cloneData"> @@ -269,9 +266,11 @@ }); this.cloneData = tmpData; + const selection = this.getSelection(); if (status) { - this.$emit('on-select-all', this.getSelection()); + this.$emit('on-select-all', selection); } + this.$emit('on-selection-change', selection); }, fixedHeader () { if (!!this.height) { @@ -315,6 +314,13 @@ } else { $body.scrollLeft = $body.scrollLeft - 10; } + }, + handleSort (index, type) { + if (type === 'asc') { + + } else if (type === 'desc') { + + } } }, compiled () { diff --git a/src/styles/components/table.less b/src/styles/components/table.less index 800b920..71e2712 100644 --- a/src/styles/components/table.less +++ b/src/styles/components/table.less @@ -197,7 +197,7 @@ position: absolute; top: 0; left: 0; - box-shadow: 1px 0 8px #d3d4d6; + box-shadow: @shadow-right; overflow-x: hidden; &::before { @@ -215,7 +215,7 @@ top: 0; left: auto; right: 0; - box-shadow: -1px 0 8px #d3d4d6; + box-shadow: @shadow-left; } &-fixed-header{ overflow: hidden; @@ -227,4 +227,8 @@ position: relative; z-index: 3; } + + &-sort{ + .sortable(); + } } \ No newline at end of file diff --git a/src/styles/mixins/caret.less b/src/styles/mixins/caret.less new file mode 100644 index 0000000..d3217c9 --- /dev/null +++ b/src/styles/mixins/caret.less @@ -0,0 +1,33 @@ +// sortable +.sortable() { + display: inline-block; + width: 8px; + height: 12px; + margin-left: 4px; + margin-top: -1px; + vertical-align: middle; + overflow: hidden; + cursor: pointer; + position: relative; + + i { + display: block; + height: 6px; + line-height: 6px; + overflow: hidden; + position: absolute; + color: @btn-disable-color; + transition: color @transition-time @ease-in-out; + + &:hover{ + color: inherit; + } + + &:first-child{ + top: 0; + } + &:last-child{ + bottom: 0; + } + } +} \ No newline at end of file diff --git a/src/styles/mixins/index.less b/src/styles/mixins/index.less index 2dfd511..0937bf3 100644 --- a/src/styles/mixins/index.less +++ b/src/styles/mixins/index.less @@ -12,3 +12,4 @@ @import "content"; // card、modal @import "tooltip"; @import "select"; +@import "caret"; \ No newline at end of file diff --git a/test/routers/table.vue b/test/routers/table.vue index 8d4534f..3e10080 100644 --- a/test/routers/table.vue +++ b/test/routers/table.vue @@ -9,8 +9,9 @@
${row.age}` @@ -80,7 +82,7 @@ fixed: 'right', width: 120, render (row, column, index) { - return `${row.name}` + return `${row.name}${index}` // return `${row.name}` } } @@ -153,7 +155,6 @@ // this.columns[2].width = 150; // return; // this.height = 150; -// return // this.data.push({ // name: '刘天娇2', // age: 272, @@ -161,6 +162,7 @@ // edit: false // }); // this.data.splice(1, 1) +// this.columns.splice(2,1) }, 2000); } } -- libgit2 0.21.4