javascript - Vue2中el-table勾选数据后为何横向滚动条重置？

Question

vue2中其他组件引用el-table的勾选数据，为何会导致el-table横向滚动条重置？

1、页面中el-table宽度超过100%，X轴出现滚动条，勾选后获得的数据是multipleSelection
2、页面中另一个组件 <Demo :list="multipleSelection"></Demo> ,组件没有修改list的任何操作
3、每次勾选X轴的滚动条都会回到初始位置，就像el-table被重绘了一样

我尝试使用 <Demo :list="cloneMultipleSelection"></Demo> 和 this.CloneMultipleSelection = JSON.parse(JSON.stringify(this.multipleSelection)) 也会如此

<el-table  @selection-change="handleSelectionChange"></el-table>

handleSelectionChange(val) {
    this.multipleSelection = val;
},

Answer 1

在 Vue 中，当组件的某个属性（props）或数据（data）发生变化时，Vue 会进行响应式更新。在你的情况下，尽管 <Demo :list="multipleSelection"></Demo> 组件可能没有对 list 进行任何修改操作，但问题在于 multipleSelection 数组在 handleSelectionChange 方法中被重新赋值了。

这种重新赋值的行为会触发 Vue 的依赖收集和更新过程。如果 el-table 的渲染（或者其内部的某些部分）依赖于 multipleSelection（尽管直接看来并不明显），那么当 multipleSelection 发生变化时，el-table 可能会进行重绘，这就会导致滚动条回到初始位置。

为了解决这个问题，你可以尝试以下几种方法：

1. 确保 el-table 的滚动状态是独立的：
   确保 el-table 的滚动状态（例如滚动条的位置）不依赖于任何外部数据或属性。这可能需要你手动管理滚动条的位置，或者确保在更新 multipleSelection 时不会影响到 el-table 的滚动状态。
2. 使用 Vue 的 key 属性：
   在 Vue 中，key 属性被用来跟踪每个节点的身份，从而重用和重新排序现有元素。如果你能在包裹 el-table 的元素上使用 key，并且确保每次 multipleSelection 发生变化时 key 也发生变化，这可能会阻止不必要的重绘。但请注意，这种方法可能会导致整个 el-table 被销毁并重新创建，这可能不是你所期望的。
3. 避免不必要的渲染：
   确保 Demo 组件在接收到新的 list 时不会触发任何会导致 el-table 重新渲染的操作。这可能需要你仔细审查 Demo 组件的内部实现，以及它与其他组件或 Vue 实例的交互。
4. 使用计算属性或观察者：
   考虑使用计算属性或 Vue 的观察者（watchers）来管理 multipleSelection 的变化，而不是直接在 handleSelectionChange 方法中更新它。这可能会给你更多的控制力，以便在更新 multipleSelection 时避免不必要的副作用。
5. 检查其他可能的副作用：
   确保没有其他代码（例如全局事件监听器、Vuex 操作等）在 multipleSelection 发生变化时触发 el-table 的重绘。

最后，请注意，由于 Vue 的内部实现和响应式系统的复杂性，有时候可能需要一些实验和调试才能找到问题的根本原因和最佳解决方案。