el-table加了key导致页面滚动位置异常?这个优化方案让用户体验直线提升!

一、需求背景

最近在做需求的时候,发现切换列表的时候,页面会默认跳转到网页的中间部分,但是我的列表是在下面的位置,这就需要用户切换列表后,再手动滑下去🤔 用户体验并不友好。具体表现如下:

==虽然不是什么大问题,体验上总怪怪的

二、原因定位

最后原因是代码上el-table加了key,因为产品prd是用el-radio-group模拟了el-tabs的切换功能,所以列表的数据是要动态加载的,又要维持默认的排序,所以给el-table加上了key。让表格重新渲染来恢复默认的排序规则,拿到正确的数据。。。

less 复制代码
  <el-table 
        :key='riskLevel' //注意这个key
        :data="list"
        border
        :defaultSort="{ order: 'descending', prop: 'alterDeviceTotal' }"
        @sort-change="onSortChange"
      >

如果去掉key,影响就是切换radio的地区后,排序没能更新。

所以优化上,通过添加ref来操作表格元素,用户切换radio后,清除现有排序、再恢复默认排序规则即可,这样组件不会重新渲染,只是数据上的调整,页面就不会跳到中间去了。

ini 复制代码
  <div class="area-table">
      <div class="table-header">
        <el-radio-group v-model="areaLevel" @change="handleAreaLevelChange">
          <el-radio v-for="item in areaLevelOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>
      <el-table
        ref="tableRef"
        :data="list"
        border
        :defaultSort="{ order: 'descending', prop: 'alterDeviceTotal' }"
        @sort-change="onSortChange"
      >
        <el-table-column
          v-for="column in tableColumns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :minWidth="column.minWidth"
          :sortable="column.sortable"
        >
          <template #default="{ row }">
            <span v-if="column.prop === 'rate'">{{ row.rate }}%</span>
          </template>
        </el-table-column>
      </el-table>
      <Paginations
        :totalCount="pages.totalCount"
        :pageNumber="pages.pageNumber"
        :pageSize="pages.pageSize"
        @load-more="onPaginationsChange"
      />
    </div>

ref清除排序&添加默认排序

javascript 复制代码
// 处理区域级别变化-重置表格排序状态并设置默认排序
const handleAreaLevelChange = (value) => {
  tableRef.value.clearSort();
  tableRef.value.sort('alterDeviceTotal', 'descending'); // 手动设置默认排序状态-会触发onSortChange去重新获取数据
};

也就是一个思路吧,看看滚动异常的时候 是不是因为表格加了key

相关推荐
风无雨27 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780092 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家2 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆3 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记3 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆3 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js