From b8a4300003832a49462738263ab29a582a805ee7 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Sun, 27 Nov 2016 20:43:54 +0800
Subject: [PATCH] update Table
---
src/components/table/table.vue | 73 ++++++++++++++++++++++++++++++++++++++++++-------------------------------
src/styles/components/table.less | 19 ++++++++++++++++---
test/routers/table.vue | 6 +++++-
3 files changed, 63 insertions(+), 35 deletions(-)
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 51df582..4479d00 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -18,35 +18,42 @@
:clone-data="cloneData"></table-body>
</div>
<div :class="[prefixCls + '-fixed']">
- <!--todo 设置个div头部-->
- <table-head
- fixed
- :prefix-cls="prefixCls"
- :style="fixedTableStyle"
- :columns="leftFixedColumns"
- :clone-data="cloneData"></table-head>
- <table-body
- fixed
- :prefix-cls="prefixCls"
- :style="fixedTableStyle"
- :columns="leftFixedColumns"
- :data="data"
- :clone-data="cloneData"></table-body>
+ <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
+ <table-head
+ fixed
+ :prefix-cls="prefixCls"
+ :style="fixedTableStyle"
+ :columns="leftFixedColumns"
+ :clone-data="cloneData"></table-head>
+ </div>
+ <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
+ <table-body
+ fixed
+ :prefix-cls="prefixCls"
+ :style="fixedTableStyle"
+ :columns="leftFixedColumns"
+ :data="data"
+ :clone-data="cloneData"></table-body>
+ </div>
</div>
<div :class="[prefixCls + '-fixed-right']">
- <table-head
- fixed
- :prefix-cls="prefixCls"
- :style="fixedRightTableStyle"
- :columns="rightFixedColumns"
- :clone-data="cloneData"></table-head>
- <table-body
- fixed
- :prefix-cls="prefixCls"
- :style="fixedRightTableStyle"
- :columns="rightFixedColumns"
- :data="data"
- :clone-data="cloneData"></table-body>
+ <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
+ <table-head
+ fixed
+ :prefix-cls="prefixCls"
+ :style="fixedRightTableStyle"
+ :columns="rightFixedColumns"
+ :clone-data="cloneData"></table-head>
+ </div>
+ <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
+ <table-body
+ fixed
+ :prefix-cls="prefixCls"
+ :style="fixedRightTableStyle"
+ :columns="rightFixedColumns"
+ :data="data"
+ :clone-data="cloneData"></table-body>
+ </div>
</div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
</div>
@@ -161,6 +168,11 @@
let style = {};
if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`;
return style;
+ },
+ fixedBodyStyle () {
+ let style = {};
+ if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
+ return style;
}
},
methods: {
@@ -179,7 +191,6 @@
this.columnsWidth = [];
let autoWidthIndex = -1;
if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);
- console.log(1)
const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
@@ -291,9 +302,9 @@
this.cloneColumns = left.concat(center).concat(right);
},
handleBodyScroll (event) {
- this.$els.header.scrollLeft = event.target.scrollLeft;
-
- // todo 固定时上下滚动，固定的表头也滚动 scrollTop
+ if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft;
+ if (this.leftFixedColumns.length) this.$els.fixedBody.scrollTop = event.target.scrollTop;
+ if (this.rightFixedColumns.length) this.$els.fixedRightBody.scrollTop = event.target.scrollTop;
},
handleMouseWheel (event) {
const deltaX = event.deltaX;
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index f7baef6..800b920 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -33,7 +33,7 @@
top: 0;
right: 0;
background-color: @border-color-base;
- z-index: 1;
+ z-index: 3;
}
&-with-header{
@@ -140,7 +140,9 @@
vertical-align: middle;
}
- &-stripe &-body{
+ &-stripe &-body,
+ &-stripe &-fixed-body
+ {
tr:nth-child(2n) {
td{
background-color: @table-td-stripe-bg;
@@ -183,7 +185,8 @@
&-row-highlight,
tr&-row-highlight&-row-hover,
- &-stripe &-body tr&-row-highlight:nth-child(2n)
+ &-stripe &-body tr&-row-highlight:nth-child(2n),
+ &-stripe &-fixed-body tr&-row-highlight:nth-child(2n)
{
td{
background-color: @table-td-highlight-bg;
@@ -214,4 +217,14 @@
right: 0;
box-shadow: -1px 0 8px #d3d4d6;
}
+ &-fixed-header{
+ overflow: hidden;
+ position: relative;
+ z-index: 3;
+ }
+ &-fixed-body{
+ overflow: hidden;
+ position: relative;
+ z-index: 3;
+ }
}
\ No newline at end of file
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 5b524ac..8d4534f 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -9,7 +9,10 @@
<br>
<i-table
width="450"
- border
+ height="200"
+ stripe
+ highlight-row
+ :show-header="true"
:columns="columns"
:data="data"
:row-class-name="rowClsName"
@@ -61,6 +64,7 @@
title: '地址',
key: 'address',
align: 'center',
+// fixed: 'right',
width: 100,
// render (row, column, index) {
// if (row.edit) {
--
libgit2 0.21.4