fix(table): unexpect horizontal scroll appear

fix #278
vexip-ui · Mar 8, 2023 · 84598bf · 84598bf
1 parent aadf319
commit 84598bf
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/components/table/store.ts b/components/table/store.ts
@@ -562,7 +562,7 @@ export function useStore(options: StoreOptions) {
     // 剩余空间有多时, 均分到弹性列
     // if (flexColumnCount && flexWidth > flexColumnCount * flexUnitWidth) {
     if (flexColumnCount) {
-      flexUnitWidth = Math.floor(flexWidth / flexColumnCount)
+      flexUnitWidth = flexWidth / flexColumnCount
     }
 
     for (let i = 0; i < flexColumnCount; ++i) {

diff --git a/components/table/table.vue b/components/table/table.vue
@@ -10,12 +10,12 @@
       <slot></slot>
     </div>
     <Scroll
+      ref="xScroll"
       inherit
       use-x-bar
       mode="horizontal"
       :class="[nh.be('wrapper'), props.scrollClass.horizontal]"
       :bar-class="nh.bem('bar', 'horizontal')"
-      :width="props.width"
       :bar-fade="props.barFade"
       :delta-x="50"
       @scroll="handleXScroll"
@@ -250,6 +250,7 @@ export default defineComponent({
     const yScrollEnable = ref(false)
 
     const wrapper = ref<HTMLElement>()
+    const xScroll = ref<InstanceType<typeof Scroll>>()
     const thead = ref<InstanceType<typeof TableHead>>()
     const mainScroll = ref<InstanceType<typeof Scroll>>()
     const indicator = ref<HTMLElement>()
@@ -515,21 +516,14 @@ export default defineComponent({
       if (isDefined(width)) {
         if (typeof width === 'string' && parseFloat(width).toString() !== width) {
           tableWidth.value = width
-
-          nextTick(() => {
-            wrapper.value && setTableWidth(wrapper.value.offsetWidth)
-          })
         } else {
-          const numberWidth = toNumber(width)
-
-          tableWidth.value = `${numberWidth}px`
-          setTableWidth(numberWidth)
+          tableWidth.value = `${toNumber(width)}px`
         }
-      } else {
-        nextTick(() => {
-          wrapper.value && setTableWidth(wrapper.value.offsetWidth)
-        })
       }
+
+      nextTick(() => {
+        xScroll.value?.$el && setTableWidth(xScroll.value?.$el.offsetWidth)
+      })
     }
 
     function computeBodyHeight() {
@@ -962,6 +956,7 @@ export default defineComponent({
       store,
 
       wrapper,
+      xScroll,
       thead,
       mainScroll,
       indicator,

diff --git a/style/table.scss b/style/table.scss
@@ -66,6 +66,8 @@ $table: map.merge(
   border: $border-a transparent;
 
   &__wrapper {
+    width: 100%;
+
     .#{$namespace}-scroll__wrapper {
       min-width: 100%;
     }