VisActor / VisActor/VTable

[Bug] In Vue 3 components, after setting transpose=true, the frozenColCount and allowFrozenColCount properties are not taking effect.

Open
#4,111 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug good first issue
Dominant language
TypeScript
Stars
3.7k
Forks
486
Avg merge
1d 19h
Merged PRs (30d)
16

Description

Version

"@visactor/vue-vtable": "^1.19.1",

Link to Minimal Reproduction

https://visactor.io/vtable/demo/basic-functionality/frozen-col

Steps to Reproduce

Vue3 vite

<template>
  <div ref="container" class="table-container">
    <ListTable 
      :options="tableOptions" 
      :style="{ width: containerWidth + 'px', height: containerHeight + 'px' }"
    />
  </div>
</template>

<script>
import { ListTable } from '@visactor/vue-vtable';
export default {
  components: { ListTable },
  data() {
    return {
      containerWidth: 0,
      containerHeight: 0,
      tableOptions: {
        columns: [
          { field: '0', title: '名称' },
          { field: '1', title: '年龄' },
          { field: '2', title: '性别' },
          { field: '3', title: '爱好' }
        ],
        records: new Array(1000).fill(['张三', 18, '男', '🏀']),
        frozenColCount:2, 
        transpose:true,
      },
      resizeObserver: null,
      
    };
  },
  mounted() {
    this.updateContainerSize();
    // 监听窗口大小变化(带防抖优化)
    this.resizeObserver = new ResizeObserver(() => {
      requestAnimationFrame(() => {
        this.updateContainerSize();
      });
    });
    this.resizeObserver.observe(this.$refs.container);
  },
  beforeUnmount() {
    // 清理监听器
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  },
  methods: {
    updateContainerSize() {
      const container = this.$refs.container;
      if (container) {
        this.containerWidth = container.offsetWidth;
        this.containerHeight = container.offsetHeight;
      }
    }
  }
};
};
</script>
<style scoped>
.table-container {
  width: 100vw;   /* 视口宽度 */
  height: 100vh;  /* 视口高度 */
}
</style>
Current Behavior

set transpose=true,then config 'frozenColCount' and ' allowFrozenColCount' are not taking effect

Expected Behavior

'frozenColCount' and 'allowFrozenColCount' take effect only when 'transpose=true' is enabled.

Environment
- OS:windows11
- Browser:Microsoft Edge 137.0.3296.93 (正式版本) (64 位)
- Framework: "@visactor/vue-vtable": "^1.19.1",
Any additional comments?

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Vue 3 reproduction in the issue and the frozen-col demo at the linked URL, then trace how transpose, frozenColCount, and allowFrozenColCount are passed into the table component. Done means both frozen-column settings visibly take effect when transpose=true, while the existing reproduction no longer shows the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.