问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
等一个机会
    44517
    头像
    汝何不上九霄
      4.8k61947

      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;
},
      vue2element-ui前端javascript
      阅读 1.2k
      avatarAI BotBETA

      在 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 的内部实现和响应式系统的复杂性，有时候可能需要一些实验和调试才能找到问题的根本原因和最佳解决方案。

      1 个回答
      得票最新
      头像
      不羁的海龟
        2
        新手上路，请多包涵

        我用el-table没有碰到过e这个问题，但在用vue3加antd的checkbox时遇到了类似的问题，排查后发现antd的checkbox中有一个input，点击时label会对input获取焦点，导致页面横向滚动条自动重置（实际是自动滚动到input所在位置）
        博主可以试着排查下，你的勾选操作是不是也触发了类似input获取焦点之类的事件
        希望能帮到你~

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题