mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: [el-table] fixed columns display when horizontal cannot scroll (#6320)

Browse Source 
* fix: [el-table] fixed columns display when horizontal cannot scroll

* fix: change default class

* refactor: optimize fixed column style
This commit is contained in:
msidolphin 2022-03-07 16:17:16 +08:00 committed by GitHub
parent 43ee78563b
commit a7db76d782
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/components/table/src/table/style-helper.ts
View File

@ -114,7 +114,6 @@ function useStyle<T>(
requestAnimationFrame(syncPostion)
}
onMounted(async () => {
setScrollClass('is-scrolling-left')
await nextTick()
store.updateColumns()
bindEvents()
@ -149,8 +148,22 @@ function useStyle<T>(
const { tableWrapper } = table.refs
setScrollClassByEl(tableWrapper, className)
}
const existsScrollClass = (className: string) => {
const { tableWrapper } = table.refs
if (tableWrapper && tableWrapper.classList.contains(className)) {
return true
}
return false
}
const syncPostion = function () {
if (!layout.scrollX.value || !table.refs.scrollWrapper) return
if (!table.refs.scrollWrapper) return
if (!layout.scrollX.value) {
const scrollingNoneClass = 'is-scrolling-none'
if (!existsScrollClass(scrollingNoneClass)) {
setScrollClass(scrollingNoneClass)
}
return
}
const scrollContainer = table.refs.scrollWrapper.wrap$
if (!scrollContainer) return
const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer

2
packages/theme-chalk/src/common/var.scss
View File

@ -692,6 +692,8 @@ $table: map.merge(
'bg-color': var(--el-color-white),
'tr-bg-color': var(--el-color-white),
'expanded-cell-bg-color': var(--el-color-white),
'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
),
$table
);

22
packages/theme-chalk/src/table.scss
View File

@ -354,7 +354,7 @@
bottom: -1px;
overflow-x: hidden;
overflow-y: hidden;
box-shadow: inset -10px 0 10px -10px rgb(0 0 0 / 15%);
box-shadow: none;
touch-action: none;
pointer-events: none;
}
@ -367,7 +367,7 @@
&.is-last-column {
&::before {
right: -10px;
box-shadow: inset 10px 0 10px -10px rgb(0 0 0 / 15%);
box-shadow: none;
}
}
}
@ -404,9 +404,9 @@
}
@include when(scrolling-left) {
.#{$namespace}-table-fixed-column--left.is-last-column {
.#{$namespace}-table-fixed-column--right.is-first-column {
&::before {
box-shadow: none;
box-shadow: var(--el-table-fixed-right-column);
}
}
&.#{$namespace}-table--border {
@ -421,9 +421,9 @@
}
@include when(scrolling-right) {
.#{$namespace}-table-fixed-column--right.is-first-column {
.#{$namespace}-table-fixed-column--left.is-last-column {
&::before {
box-shadow: none;
box-shadow: var(--el-table-fixed-left-column);
}
}
.#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
@ -435,6 +435,16 @@
.#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
border-right: none;
}
.#{$namespace}-table-fixed-column--right.is-first-column {
&::before {
box-shadow: var(--el-table-fixed-right-column);
}
}
.#{$namespace}-table-fixed-column--left.is-last-column {
&::before {
box-shadow: var(--el-table-fixed-left-column);
}
}
}
@include when(scrolling-none) {