update Table
update Table
This commit is contained in:
梁灏
parent
340681ab50
commit
b8a4300003
3 changed files with 63 additions and 35 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue