From 3ef4dfb9ef0717e104bb0390fc6d81f4049ba069 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= Date: Fri, 25 Nov 2016 22:51:50 +0800 Subject: [PATCH 1/3] update Table update Table --- src/components/table/cell.vue | 26 ++++++++++++++-- src/components/table/table-body.vue | 4 ++- src/components/table/table-column.vue | 21 ------------- src/components/table/table-head.vue | 2 +- src/components/table/table.vue | 45 +++++++++++++++++---------- src/styles/components/table.less | 5 ++- test/routers/table.vue | 11 ++++--- 7 files changed, 68 insertions(+), 46 deletions(-) delete mode 100644 src/components/table/table-column.vue diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue index 1fa8a1fb..15be5a74 100644 --- a/src/components/table/cell.vue +++ b/src/components/table/cell.vue @@ -1,16 +1,23 @@ \ No newline at end of file diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue index 7c831512..7761338e 100644 --- a/src/components/table/table-head.vue +++ b/src/components/table/table-head.vue @@ -2,7 +2,7 @@ -
+
diff --git a/src/components/table/table.vue b/src/components/table/table.vue index a1bb4d03..33a96cb6 100644 --- a/src/components/table/table.vue +++ b/src/components/table/table.vue @@ -13,7 +13,7 @@ :columns="cloneColumns">
-
+
@@ -26,26 +26,28 @@ @mouseleave.stop="handleMouseOut(index)" @click.stop="highlightCurrentRow(index)">
-
- -
- - - - - - - - - - +
+ + + + + + + + +
@@ -82,6 +84,9 @@ return oneOf(value, ['small', 'large']); } }, + width: { + type: [Number, String] + }, height: { type: [Number, String] }, @@ -141,6 +146,7 @@ styles () { let style = {}; if (!!this.height) style.height = `${this.height}px`; + if (!!this.width) style.width = `${this.width}px`; return style; }, tableStyle () { @@ -277,8 +283,15 @@ // todo 固定时上下滚动,固定的表头也滚动 scrollTop }, - handleMouseWheel () { - console.log(111) + handleMouseWheel (event) { + const deltaX = event.deltaX; + const $body = this.$els.body; + + if (deltaX > 0) { + $body.scrollLeft = $body.scrollLeft + 10; + } else { + $body.scrollLeft = $body.scrollLeft - 10; + } } }, compiled () { diff --git a/src/styles/components/table.less b/src/styles/components/table.less index ba86218e..ff102ed4 100644 --- a/src/styles/components/table.less +++ b/src/styles/components/table.less @@ -10,7 +10,7 @@ border: 1px solid @border-color-base; border-bottom: 0; border-right: 0; - border-collapse: collapse; + //border-collapse: collapse; box-sizing: border-box; position: relative; @@ -130,6 +130,9 @@ word-break: break-all; box-sizing: border-box; } + &-hidden{ + visibility: hidden; + } th &-cell{ display: inline-block; position: relative; diff --git a/test/routers/table.vue b/test/routers/table.vue index 7be2d62d..c27ad4c9 100644 --- a/test/routers/table.vue +++ b/test/routers/table.vue @@ -8,9 +8,8 @@
${row.age}` @@ -151,7 +154,7 @@ // address: '北京市东城区2', // edit: false // }); - this.data.splice(1, 1) +// this.data.splice(1, 1) }, 1000); } } From 7f34c510307215cc599a2ba86d638570e16e0fe5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= Date: Sat, 26 Nov 2016 08:57:09 +0800 Subject: [PATCH 2/3] update Table update Table --- src/components/table/cell.vue | 23 ++++---- src/components/table/table-body.vue | 60 +++++++++++++++---- src/components/table/table-head.vue | 37 +++++++----- src/components/table/table.vue | 91 +++++++++++++---------------- src/styles/components/table.less | 25 ++++++++ test/routers/table.vue | 2 +- 6 files changed, 149 insertions(+), 89 deletions(-) diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue index 15be5a74..e31c6a63 100644 --- a/src/components/table/cell.vue +++ b/src/components/table/cell.vue @@ -17,7 +17,8 @@ row: Object, column: Object, index: Number, - checked: Boolean + checked: Boolean, + fixed: Boolean }, data () { return { @@ -30,7 +31,7 @@ return [ `${this.prefixCls}-cell`, { - [`${this.prefixCls}-hidden`]: this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right') + [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right') } ] } @@ -38,29 +39,31 @@ methods: { compile () { if (this.column.render) { + const $parent = this.$parent.$parent.$parent; const template = this.column.render(this.row, this.column, this.index); const cell = document.createElement('div'); cell.innerHTML = template; - const _oldParentChildLen = this.$parent.$parent.$children.length; - this.$parent.$parent.$compile(cell); - const _newParentChildLen = this.$parent.$parent.$children.length; + const _oldParentChildLen = $parent.$children.length; + $parent.$compile(cell); + const _newParentChildLen = $parent.$children.length; if (_oldParentChildLen !== _newParentChildLen) { // if render normal html node, do not tag - this.uid = this.$parent.$parent.$children[this.$parent.$parent.$children.length - 1]._uid; // tag it, and delete when data or columns update + this.uid = $parent.$children[$parent.$children.length - 1]._uid; // tag it, and delete when data or columns update } this.$el.innerHTML = ''; this.$el.appendChild(cell); } }, destroy () { - for (let i = 0; i < this.$parent.$parent.$children.length; i++) { - if (this.$parent.$parent.$children[i]._uid === this.uid) { - this.$parent.$parent.$children[i].$destroy(); + const $parent = this.$parent.$parent.$parent; + for (let i = 0; i < $parent.$children.length; i++) { + if ($parent.$children[i]._uid === this.uid) { + $parent.$children[i].$destroy(); } } }, toggleSelect (index) { - this.$parent.toggleSelect(index); + this.$parent.$parent.toggleSelect(index); } }, compiled () { diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue index 080ffc4f..af99b5ec 100644 --- a/src/components/table/table-body.vue +++ b/src/components/table/table-body.vue @@ -1,23 +1,59 @@ \ No newline at end of file diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue index 7761338e..dfd85c0c 100644 --- a/src/components/table/table-head.vue +++ b/src/components/table/table-head.vue @@ -1,14 +1,19 @@