[Bug] In Vue 3 components, after setting transpose=true, the frozenColCount and allowFrozenColCount properties are not taking effect.
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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