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

Table add props: fixed-shadow

Browse source
This commit is contained in:
梁灏 2021-09-08 21:48:11 +08:00
parent f998751ab8
commit 4e695bb10f
2 changed files with 46 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -48,7 +48,7 @@
</tbody>
</table>
</div>
<div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed">
<div :class="fixedTableClasses" :style="fixedTableStyle" v-if="isLeftFixed">
<div :class="fixedHeaderClasses" v-if="showHeader">
<table-head
fixed="left"
@ -84,7 +84,7 @@
:style="{ 'margin-top': showHorizontalScrollBar ? scrollBarWidth + 'px' : 0 }"
/>
</div>
<div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle" v-if="isRightFixed">
<div :class="fixedRightTableClasses" :style="fixedRightTableStyle" v-if="isRightFixed">
<div :class="fixedHeaderClasses" v-if="showHeader">
<table-head
fixed="right"
@ -295,6 +295,13 @@
showContextMenu: {
type: Boolean,
default: false
},
// 4.7.0
fixedShadow: {
validator (value) {
return oneOf(value, ['auto', 'show', 'hide']);
},
default: 'show'
}
},
data () {
@ -327,7 +334,9 @@
contextMenuStyles: {
top: 0,
left: 0
}
},
scrollOnTheLeft: false,
scrollOnTheRight: false
};
},
computed: {
@ -375,6 +384,22 @@
}
];
},
fixedTableClasses () {
return [
`${prefixCls}-fixed`,
{
[`${prefixCls}-fixed-shadow`]: this.fixedShadow === 'show' || (this.fixedShadow === 'auto' && !this.scrollOnTheLeft)
}
];
},
fixedRightTableClasses () {
return [
`${prefixCls}-fixed-right`,
{
[`${prefixCls}-fixed-shadow`]: this.fixedShadow === 'show' || (this.fixedShadow === 'auto' && !this.scrollOnTheRight)
}
];
},
fixedHeaderClasses () {
return [
`${prefixCls}-fixed-header`,
@ -651,6 +676,15 @@
this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0) + 1;
this.columnsWidth = columnsWidth;
this.fixedHeader();
// 4.7.0 auto fixed shadow
if (this.fixedShadow === 'auto') {
this.$nextTick(() => {
const $body = this.$refs.body;
this.scrollOnTheLeft = $body.scrollLeft === 0;
this.scrollOnTheRight = $body.scrollWidth === $body.scrollLeft + $body.clientWidth;
});
}
},
handleMouseIn (_index, rowKey) {
if (this.disabledHover) return;
@ -1036,6 +1070,10 @@
this.cloneColumns.forEach((col) => col._filterVisible = false);
},
handleBodyScroll (event) {
// 4.7.0
this.scrollOnTheLeft = event.target.scrollLeft === 0;
this.scrollOnTheRight = event.target.scrollWidth === event.target.scrollLeft + event.target.clientWidth;
if (this.showHeader) this.$refs.header.scrollLeft = event.target.scrollLeft;
if (this.isLeftFixed) this.$refs.fixedBody.scrollTop = event.target.scrollTop;
if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop;

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

@ -389,7 +389,6 @@
position: absolute;
top: 0;
left: 0;
box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
&::before {
content: '';
@ -406,6 +405,11 @@
top: 0;
left: auto;
right: 0;
}
&-fixed&-fixed-shadow{
box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
}
&-fixed-right&-fixed-shadow{
box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
}
&-fixed-right-header{