Auto adjust table content width

[topfunplusnew]

Add v-auto-table-width directive to automatically adjust el-table column widths based on content for improved readability.

---

 

---

Note

Adds a Vue directive v-auto-table-width to auto-adjust Element UI el-table column widths based on content, with options, registration, example, and docs.

• Directive:
  • Adds src/directive/module/autoTableWidth.js providing v-auto-table-width to auto-size el-table columns using content measurement with options: minWidth, maxWidth, padding, excludeColumns, delay.
  • Handles updates via MutationObserver, window resize, and cleans up on unbind.
• Registration:
  • Registers directive in src/directive/index.js as autoTableWidth.
• Examples/Docs:
  • Adds usage example in src/directive/module/autoTableWidth.example.vue.
  • Adds documentation src/directive/module/autoTableWidth.md with features, usage, and notes.

^{Written by Cursor Bugbot for commit 3612970. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[cursor]

This PR is being reviewed by Cursor Bugbot

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[cursor]

Bug: Stale Timer Reference Causes Leaks

The timer reference saved to el._autoTableWidthTimer on line 55 becomes stale immediately. The local adjustTimer variable gets updated inside the adjustWidth closure on each call, but el._autoTableWidthTimer is only set once during initialization. This prevents proper cleanup of active timers in the update and unbind hooks, causing timer leaks when the directive updates or unbinds while a delayed adjustment is pending.

 

[cursor]

Bug: Infinite Style Loop Crushes Performance

The MutationObserver watches for style attribute changes with attributeFilter: ['style', 'class'], but the directive itself modifies element styles in adjustTableWidth (lines 225-226, 240-241). This creates an infinite observation loop where each width adjustment triggers the observer, which triggers another adjustment, causing excessive recalculations and severe performance degradation.

 

[cursor]

Bug: Persistent Override Causes Leaks and Conflicts

The code permanently overwrites vueInstance.$forceUpdate without storing the original method or cleaning it up in unbind. This causes the override to persist after the directive is removed, and prevents multiple directives on the same component from working correctly. The overridden method also lacks proper cleanup, leading to memory leaks as the closure retains references to adjustWidth.

 

[cursor]

Bug: Dynamic Widths Stuck on Old Settings

The update hook cannot update the configuration used by the MutationObserver and resize handler because they reference the adjustWidth closure from inserted which captures the original options. When binding values change (like minWidth, maxWidth, padding, or excludeColumns), the observer and resize handler continue using stale configuration values, causing inconsistent width calculations between manual updates and automatic recalculations.