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 @@
- {{{ renderHeader(column, $index) }}}
+
+ {{{ renderHeader(column, $index) }}}
+
+
+
+
+
@@ -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