drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Table

Browse source 
update Table
This commit is contained in:
梁灏 2016-11-27 20:43:54 +08:00
parent 340681ab50
commit b8a4300003
3 changed files with 63 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/components/table/table.vue
View file

@ -18,35 +18,42 @@
:clone-data="cloneData"></table-body> :clone-data="cloneData"></table-body>
</div> </div>
<div :class="[prefixCls + '-fixed']"> <div :class="[prefixCls + '-fixed']">
<!--todo 设置个div头部--> <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
<table-head <table-head
fixed fixed
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="fixedTableStyle" :style="fixedTableStyle"
:columns="leftFixedColumns" :columns="leftFixedColumns"
:clone-data="cloneData"></table-head> :clone-data="cloneData"></table-head>
<table-body </div>
fixed <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
:prefix-cls="prefixCls" <table-body
:style="fixedTableStyle" fixed
:columns="leftFixedColumns" :prefix-cls="prefixCls"
:data="data" :style="fixedTableStyle"
:clone-data="cloneData"></table-body> :columns="leftFixedColumns"
:data="data"
:clone-data="cloneData"></table-body>
</div>
</div> </div>
<div :class="[prefixCls + '-fixed-right']"> <div :class="[prefixCls + '-fixed-right']">
<table-head <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
fixed <table-head
:prefix-cls="prefixCls" fixed
:style="fixedRightTableStyle" :prefix-cls="prefixCls"
:columns="rightFixedColumns" :style="fixedRightTableStyle"
:clone-data="cloneData"></table-head> :columns="rightFixedColumns"
<table-body :clone-data="cloneData"></table-head>
fixed </div>
:prefix-cls="prefixCls" <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
:style="fixedRightTableStyle" <table-body
:columns="rightFixedColumns" fixed
:data="data" :prefix-cls="prefixCls"
:clone-data="cloneData"></table-body> :style="fixedRightTableStyle"
:columns="rightFixedColumns"
:data="data"
:clone-data="cloneData"></table-body>
</div>
</div> </div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
</div> </div>
@ -161,6 +168,11 @@
let style = {}; let style = {};
if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`; if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`;
return style; return style;
},
fixedBodyStyle () {
let style = {};
if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
return style;
} }
}, },
methods: { methods: {
@ -179,7 +191,6 @@
this.columnsWidth = []; this.columnsWidth = [];
let autoWidthIndex = -1; let autoWidthIndex = -1;
if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width); if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);
console.log(1)
const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td'); 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 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); this.cloneColumns = left.concat(center).concat(right);
}, },
handleBodyScroll (event) { handleBodyScroll (event) {
this.$els.header.scrollLeft = event.target.scrollLeft; if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft;
if (this.leftFixedColumns.length) this.$els.fixedBody.scrollTop = event.target.scrollTop;
// todo 固定时上下滚动，固定的表头也滚动 scrollTop if (this.rightFixedColumns.length) this.$els.fixedRightBody.scrollTop = event.target.scrollTop;
}, },
handleMouseWheel (event) { handleMouseWheel (event) {
const deltaX = event.deltaX; const deltaX = event.deltaX;

19
src/styles/components/table.less
View file

@ -33,7 +33,7 @@
top: 0; top: 0;
right: 0; right: 0;
background-color: @border-color-base; background-color: @border-color-base;
z-index: 1; z-index: 3;
} }
&-with-header{ &-with-header{
@ -140,7 +140,9 @@
vertical-align: middle; vertical-align: middle;
} }
&-stripe &-body{ &-stripe &-body,
&-stripe &-fixed-body
{
tr:nth-child(2n) { tr:nth-child(2n) {
td{ td{
background-color: @table-td-stripe-bg; background-color: @table-td-stripe-bg;
@ -183,7 +185,8 @@
&-row-highlight, &-row-highlight,
tr&-row-highlight&-row-hover, 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{ td{
background-color: @table-td-highlight-bg; background-color: @table-td-highlight-bg;
@ -214,4 +217,14 @@
right: 0; right: 0;
box-shadow: -1px 0 8px #d3d4d6; box-shadow: -1px 0 8px #d3d4d6;
} }
&-fixed-header{
overflow: hidden;
position: relative;
z-index: 3;
}
&-fixed-body{
overflow: hidden;
position: relative;
z-index: 3;
}
} }

6
test/routers/table.vue
View file

@ -9,7 +9,10 @@
<br> <br>
<i-table <i-table
width="450" width="450"
border height="200"
stripe
highlight-row
:show-header="true"
:columns="columns" :columns="columns"
:data="data" :data="data"
:row-class-name="rowClsName" :row-class-name="rowClsName"
@ -61,6 +64,7 @@
title: '地址', title: '地址',
key: 'address', key: 'address',
align: 'center', align: 'center',
// fixed: 'right',
width: 100, width: 100,
// render (row, column, index) { // render (row, column, index) {
// if (row.edit) { // if (row.edit) {