Element Plus el-table 换页后返回顶部

已于 2024-01-29 12:22:13 修改
阅读量1.6k 收藏
点赞数
文章标签： elementui
于 2022-02-25 17:25:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41701027/article/details/123137661
版权

废话不多说，直接上代码：

<el-table ref="table" ></el-table>

this.$refs.table.$refs.scrollWrapper.setScrollTop(0);

打印出来各种看，终于找到，亲测有效~~

许失之
关注
Vue项目中使用element-plus的el-table组件-组件使用-样式修改
JackieDYH的博客
09-18 1197
Vue项目中使用element-plus的el-table组件-组件使用-样式修改。
BackToTop “返回顶部” 页面组件
04-16
NULL 博文链接：https://newlinuxjava.iteye.com/blog/1779419
Vue3 el-table滚回到顶部
小废物
03-12 1387
【代码】Vue3 el-table滚回到顶部。
vue3 + element-plus中el-dialog对话框滚动条回到顶部
最新发布
BillKu的博客
04-21 389
3、通过开发者工具追查到滚动条对应的标签及class=“el-overlay-dialog”4、设置属性 scrollTop = 0 或者 执行方法 scrollTo(0, 0)2、使用 nextTick 等待 Dom 更新完毕。对话框滚动条回到顶部。1、需要对话框显示后。
el-table切换页码后，返回数据顶部
m0_53251830的博客
03-10 810
el-table切换页码后，返回数据顶部
el-table滚动条返回最顶端
weixin_43130016的博客
08-18 1698
滚动条返回最顶端
mock vue3 element-plus 回到顶部和底部ICON
qq_38233172的博客
03-27 289
【代码】mock vue3 element-plus 回到顶部和底部ICON。
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k...
vue修改Element的el-table样式的4种方法
01-18
修改Element中的el-table样式，可以使用以下几种方法： 　1. row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 　2. cell-style 单元格的 style 的回调方法，也可以使用一...
element的el-table中记录滚动条位置的示例代码
12-30
场景重现：在项目中使用了keep-alive来缓存组件，且使用element中的table列表，但在项目中是对table进行了二次封装，跟页码合在了一起。按照网上的直接对scrollTop赋值，赋值失败了，还要加上setTimeout才能成功，...
element-plus el-table树形 懒加载 删除子节点刷新
小夏同学呀
06-24 688
el-table懒加载更新子集数据
element-ui table 点击分页table滚到顶部
weixin_45561965的博客
04-19 1324
使用table表格的时候，切换分页之后不会回到顶部，还是停留在之前滚动的位置。//切换分页的方法加上下面这句，table就能自动滚到顶部。设置table的 ref=‘multipleTable’在开发项目过程中遇到这样一个问题。看到这如果帮到你了留个小心心吧。
vue elementUI中 el-table 如何在切换页码让滚动条回到顶部或底部
weixin_58586234的博客
07-21 2046
使用el-table显示数据，当滚动到最底部，再点击切换分页时，回显过来数据后，滚动条依然在页面底部。
ElementPlus使用分页器切换页码数据定位在顶部
Jane0129的博客
07-07 647
注意：之前在各平台搜索一直给出的解答是使用Wraper.scrollTop = 0,但是使用后无效，原因可能是因为elementPlus的el-table没有这个属性；所以直接打印this.$refs.multipleTable，可以查看所能使用的属性，对应文档使用即可（还是要多看看文档╥﹏╥）1.在el-table中添加ref=“mutipleTable”2.在对应的切换页码的方法中加上。
【Element-plus】el-table新增数据后自动滚到表格的底部或顶部
weixin_40057665的博客
06-19 958
【代码】【Element-plus】如何让滚动条永远在最底部。
vue+element返回顶部组件
sunyyyyy1的博客
06-17 427
VUE返回顶部组件
Vue3在点击菜单切换路由时，将ElementPlus UI库中el-main组件的内容滚动恢复到顶部
码农键盘上的梦
01-17 1093
在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动，但是我使用无效，于是使用操作dom的方法，如下。在回调函数中处理路由变化的逻辑 使其滚动到顶部。最后，在组件销毁前，我们使用。路由时，将页面滚动到顶部，布局如下，使用ui组件为element-plus。，这是一个响应式的路由对象。当路由发生变化时，回调函数将被调用，其中的。参数表示要切换到的路由对象，，当路由变化后滚动到顶部。
vue中使用elementUI分页实现切换页面时返回页面顶部
jiangjunyuan168的博客
05-11 2773
原理： 给elementUI分页组件的切换页面时触发事件（在这里就是handleCurrentChange函数）添加一个跳转到页顶的方法即可。 实现： <!-- 分页组件 --> <el-pagination @current-change="handleCurrentChange" > </el-pagination> //跳到页顶 scrollTop(selector) { let element = selector && document
vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置
NICKDL的博客
07-07 1230
【代码】vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置。
element plus el-table 内嵌 el-table
03-28
<think>好的，我现在需要解决用户的问题：如何在Element Plus的el-table中嵌套另一个el-table。用户可能是在开发一个需要展示层级数据的界面，比如主从表结构，或者树形表格。首先，我得回忆一下Element Plus的文档和相关组件用法。 首先，Element Plus的el-table组件支持通过作用域插槽（scoped slot）来自定义单元格内容。嵌套表格的话，应该是在某一列的作用域插槽内再放置一个el-table组件。用户可能已经尝试过直接放进去，但遇到了样式或数据绑定的问题。 接下来，我需要考虑数据结构的组织。外层表格的数据源可能是一个数组，每个对象包含一个子数组，用于内层表格的数据。比如，外层数据是parentArray，每个parent对象有一个children字段，存储子表格的数据。 然后，作用域插槽的使用。外层表格的某一列需要用到<template #default="scope">来获取当前行的数据，然后将scope.row.children作为内层表格的数据源。这里要注意作用域插槽的正确写法，尤其是在Vue3中使用Element Plus时，可能需要使用v-slot的语法。 样式方面，内层表格可能需要缩进或者调整边框，使其看起来是嵌套在外层表格中的。比如，可以给内层表格添加margin-left，或者调整单元格的padding。此外，可能需要隐藏内层表格的表头，避免重复显示。 还有，事件处理的问题。如果内层表格有交互，比如点击行或者按钮，需要确保事件能正确触发。但用户的问题主要是嵌套的实现，所以事件可能不是当前重点，但需要注意事件冒泡的问题。 然后，参考用户提供的引用内容，里面提到element和element-plus版本中dropdown事件的不同，这可能提示在组件使用上要注意版本差异。但当前问题不涉及事件，主要是结构嵌套，所以暂时可以忽略这部分，但需要注意Element Plus的API是否与旧版有变化，比如插槽的用法是否一致。 接下来，我需要写一个示例代码，展示如何在外层表格的某一行中展开内层表格。可能的结构是外层表格的某一列使用作用域插槽，内部放置一个el-table，数据绑定到scope.row.children。同时，可能需要控制内层表格的显示，比如通过展开行来显示，或者直接显示在某一单元格内。 测试代码时，要确保数据正确传递，内层表格能正确渲染子数据。样式调整可能需要一些CSS，比如设置内层表格的宽度为100%，或者调整边框合并等。 最后，生成相关问题，需要考虑用户可能遇到的后续问题，比如性能优化、样式调整、事件处理等，以及如何动态加载子表格的数据，或者处理行展开的交互。</think>在 Element Plus 中实现 `el-table` 嵌套另一个 `el-table`，可以通过作用域插槽自定义单元格内容来实现。以下是具体实现方法： ### 实现步骤 1. **数据结构准备** 外层表格数据应包含嵌套的子表格数据字段（如 `children`）： ```javascript const tableData = [ { id: 1, name: 'Parent 1', children: [ /* 子表格数据 */ ] } ] ``` 2. **外层表格定义** 使用 `el-table-column` 的作用域插槽插入嵌套表格： ```html <el-table :data="tableData"> <el-table-column prop="name" label="Parent Name"/> <el-table-column label="Nested Table"> <template #default="scope"> <!-- 嵌套的子表格 --> <el-table :data="scope.row.children" class="inner-table"> <!-- 子表格列定义 --> </el-table> </template> </el-table-column> </el-table> ``` 3. **样式优化（可选）** 添加 CSS 调整嵌套表格样式： ```css .inner-table { margin: 10px 0; width: 95%; margin-left: 5%; } ``` ### 完整示例 ```html <template> <el-table :data="parentData" style="width: 100%"> <el-table-column prop="name" label="Parent Name"/> <el-table-column label="Details"> <template #default="scope"> <el-table :data="scope.row.children" :show-header="false" class="inner-table" > <el-table-column prop="date" width="150"/> <el-table-column prop="status" width="120"/> </el-table> </template> </el-table-column> </el-table> </template> <script setup> const parentData = [ { name: 'Main Item 1', children: [ { date: '2023-01-01', status: 'Active' }, { date: '2023-01-02', status: 'Inactive' } ] } ] </script> ``` ### 注意事项 1. **数据绑定**：子表格数据通过 `scope.row.children` 动态绑定 2. **性能优化**：嵌套层级不宜过深，大数据量建议使用懒加载[^1] 3. **事件穿透**：如果子表格需要触发事件，可使用 `.native` 修饰符或单独定义事件处理器
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值