https://github.com/ttionya/element-plus-table-error-repro
https://github.com/ttionya/element-plus-table-error-repro
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ttionya/element-plus-table-error-repro
- Owner: ttionya
- Created: 2024-06-04T11:43:36.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-06-04T13:18:41.000Z (over 1 year ago)
- Last Synced: 2025-01-05T00:19:21.821Z (9 months ago)
- Language: Vue
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# element-plus-table-error-repro
This project is used to reproduce examples of errors occurring with `ElTableColumn` in complex scenarios.
Here is the related [Pull Request](https://github.com/element-plus/element-plus/pull/16782).
### Usage
Switching between the `Home` and `Table` pages makes the `Current visited route` include both pages. When staying on the `Home` page and clicking the `clear ...` button, the error occurs.
### Scenario
The core of the scenario is:
1. Using ``
2. `` controlled by `v-if` and `v-else` for display (`key` has no effect)
3. The component containing `` is unmounted when **inactive** (e.g., clearing the `include` prop of ``)
### Actual Scenario
This reproduction scenario may seem stringent, but it is very likely to occur in actual projects.
For instance, in a multi-tab management system, the `` cache of pages is associated with the open tabs. When switching to another tab, the page containing `` becomes inactive. Due to business requirements, two `` components are mutually exclusive, controlled by user attributes in stores. Upon logging out, the system first clears user information and all cached pages (by clearing the `include` prop of ``) before redirecting. At this point, an error occurs with ``.
In [this comment](https://github.com/element-plus/element-plus/pull/16782#issuecomment-2146745790), it is mentioned that if two `` components have the same props, the `default` slot should be used. However, during development, it's more likely to control which `` is displayed using `v-if` and `v-else` due to the convenient features provided by ``, such as `show-overflow-tooltip`.