vue动态树+数据表格+分页

最新推荐文章于 2024-08-28 17:00:44 发布
最新推荐文章于 2024-08-28 17:00:44 发布
阅读量1.2k 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67476502/article/details/124647666
版权
本文介绍了如何在Vue项目中动态生成二级菜单，使用element-ui的el-menu组件实现路由跳转和高亮当前选中项，并详细讲解了分页栏的配置。通过步骤解析了动态生成NavMenu导航菜单，以及在数据表格中实现分页功能的方法。
摘要由CSDN通过智能技术生成

目录

动态生成NavMenu导航菜单(只支持2级菜单)

vue+element的el-menu组件实现路由跳转及当前项的设置

4）分页栏

第一步：封装一个

 

第二步：写一个钩子函数，一进主页就获取数据

第三步：给treenode进行赋值

动态生成NavMenu导航菜单(只支持2级菜单)

4.1 给左侧菜单第一级进行绑值

    第一级节点el-submenu中的属性含义：
    index：用于菜单折叠，唯一
    key：唯一

4.2 第二级进行绑值

    第二级节点el-menu-item中的属性含义：
    index：用于页面跳转，唯一
    key：唯一

vue+element的el-menu组件实现路由跳转及当前项的设置

        <el-menu router :default-active="$route.path">

默认激活哪个菜单 

:index="node.url

最低0.47元/天 解锁文章
柚子子@
关注
动态树+数据表格+分页
weixin_66277385的博客
05-09 523
动态生成NavMenu导航菜单(只支持2级菜单) 结构 <el-submenu v-for="root in treenode" :index="'index-'+root.id" :key="'key-'+root.id"> <template slot="title"> <i :class="root.icon"></i> <span>{{root.text}}</span> </te
VUE-动态树+数据表格+分页
weixin_63104855的博客
05-18 581
VUE-动态树+数据表格+分页
一个简洁的VueJS数据表格
08-10
一个简洁的 VueJS 数据表格
VUE3左树右列表通用组件（复制直接用）
最新发布
m0_66757598的博客
08-28 197
【代码】VUE3左树右列表通用组件（复制直接用）
vuedatatablesVueJS2数据表格
08-09
vue2.0数据表，基于element-ui，el-table el-pagination filter sort
Vue2表格（Table）
热门推荐
Mr Dear的博客
08-13 2万+
展示行列数据。
Vue3表格（Table）
Mr Dear的博客
04-17 1万+
展示行列数据分页表格组件，支持：加载中；暂无数据；带边框；三种尺寸；斑马条纹；自定义页头和页脚；单元格自动省略；合并单元格；可编辑单元格；可编辑行；可展开；固定列；固定表头；固定头和列；总之，功能丰富，简单易用😁😁
vue-vue+ElementUI实现动态树+数据表格+分页
m0_59218114的博客
05-12 521
vue-vue+ElementUI实现动态树+数据表格+分页
vue09动态树+数据表格+分页模糊查
全栈
10-28 3706
努力是为了不平庸~1. 准备工作2. 动态树2.1 在配置请求路径在src/api/action.js中配置获取动态树数据的请求路径2.2 使用动态数据构建导航菜单。
vue--vue+ElementUI实现动态树+数据表格+分页
weixin_64987028的博客
05-14 399
实现动态树 数据表结构： 实现无限极分类 父类的pid是子类的id 后端代码： /** * 根据父类id查询子类pid的数据（递归） * @param pid * @param mod */ public void queryModuleByPid(Integer pid,Module mod){ String sql="select id,pid,text,icon,url,sort from t_module_vue where" + " pid="+p.
Vue 可编辑表格：让数据编辑更舒适自如
LuckyWinty的博客
11-07 511
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群使用ElementPlus的Table啥都好，就是没有可编辑表格！！！????既然UI库不支持，那我们实现一个可编辑表格是很难的事么？????难么？????不难么？...个人觉得如果是业务固定的可编辑表格，使用ElementPlus实现都不难。但是如果需要的是一个通用的可编辑表格，这好像还真说不好。对于通用的可编辑表格，网上的实现方案也是五花八门，但是看下来...
vue实例+后台大数据简单实践+简单表格
08-16
vue 实例 简单明了 适合 拿来测试 上手!
vue实现表格数据的增删改查
08-30
主要为大家详细介绍了vue实现表格数据的增删改查，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue.js知识点总结 (element框架混用 制作一个左树右表布局)
01-08
文章目录element框架混用一，安装二，引入使用找到文件并编辑使用（1）第一，加入name名作为组件导出的索引名，我们这里起名为ele（2）在App.vue下导出（3）运行（4）用CSS美化设计三，完成 >>> element框架混用 element是基于vue.js框架开发的快速搭建前端的UI框架。 因为有小伙伴做项目时不知道怎么去引入使用来布局，今天我就来教大家如何简单上手 首先要提的就是，你在做这个混用操作前，得会vue框架的单文件组件的模式操作，类似的操作也行，只要是单文件组件的思想。 开始上手 一，安装 切换到你vue的项目文件夹后，打开终端输入改安装命令（必须是你vue文件
Vue数据表格组件 (vue-data-tables) 使用指南
gitblog_00659的博客
08-08 1497
Vue数据表格组件 (vue-data-tables) 使用指南 项目地址:https://gitcode.com/gh_mirrors/vu/vue-data-tables 一、项目介绍 概述 vue-data-tables 是一个基于 Vue2 和 Element UI 的简单、可定制且支持分页的表格组件。它提供了丰富的功能以满足不同的应用场景，从基础的数据展示到复杂的数据操作都能轻松应对。 ...
Vue导出Excel数据表格
weixin_46704406的博客
07-11 162
这两天在做一个有关Vue框架导出Excel数据表格的项目练习，因为之前并未写过有关导出功能的练习，所以有感而发记录一下，也请各位一起共同各抒己见。 我的情况是后端已完成相关数据筛选，并可以用swagger完成Excel表格导出，前端请求之后后端会返回乱码，这个应该是转码的原因。然后我在网上找了一下相关网友的经验分享，有篇文章感觉就是我的当下情况，（真的很抱歉原文我找不到了，在谷歌浏览器上找历史记录发现昨天的浏览记录并未保存，真的很抱歉），然后我就按照文章的流程过了一遍，最后成功了。 我感觉最重要的代码块
在Vue中实现可编辑的表格
忧郁的蛋的专栏
11-17 4344
我们了解了如何使用Vue组件来组织表格，如何启用可编辑性，以及如何处理输入并将其保存到我们的数据集合中。通过使用本文中探讨的技术，您可以快速轻松地创建功能齐全和高度可定制的表格，以改善您的Web应用程序用户体验。在本文中，我们将探讨如何使用Vue.js实现可编辑的表格，并提供具体的代码示例。在本例中，我们将创建一个简单的表格，包含三个列：名称，数量和价格。如果行当前是非编订状态，函数将行的editable值设置为true，并在单元格中添加一个文本框，以使编辑状态启动。现在，我们已经有了添加新行的功能。
Vue表格数据相关操作
weixin_49176621的博客
09-29 792
1.批量删除 （1）给按钮绑定批量删除方法：<el-buttontype='danger'@click="dels">批量删除</el-button> （1）首先在el-table内添加一个属性方法：@selection-change="handleSelectionChange" （2）定义一个数组来接收选中的多项数据：multipleSelection:[] （3）在methods里边定义handl...
经典之Vue 3实现动态数据表格
赫客的博客
07-06 2582
在上述脚本中，columns数组定义了表格的列头和数据索引。每个对象包含title和dataIndex属性，分别表示列头显示的文字和从数据源中对应的键。
vue+element UI实现表格数据分页功能
03-30
Vue Element UI提供了el-pagination组件来实现表格数据的分页功能。以下是实现步骤： 1. 在Vue组件中引入el-pagination组件并定义分页属性 ``` <template> <div> <el-table :data="tableData" border> //表格内容 </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { tableData: [], //表格数据 total: 0, //总记录数 pageSize: 10, //每页记录数 currentPage: 1 //当前页码 }; }, methods: { handleSizeChange(val) { this.pageSize = val; this.getData(); }, handleCurrentChange(val) { this.currentPage = val; this.getData(); }, getData() { //获取数据，并更新this.tableData和this.total } } }; </script> ``` 2. 在el-pagination组件中绑定事件和属性 - @size-change：当每页显示条数改变时触发的事件，调用handleSizeChange方法更新pageSize并重新获取数据。 - @current-change：当当前页码改变时触发的事件，调用handleCurrentChange方法更新currentPage并重新获取数据。 - :current-page：当前页码，绑定到currentPage属性。 - :page-sizes：每页显示条数数组，可以自定义，默认为[10, 20, 30, 40]。 - :page-size：每页显示条数，绑定到pageSize属性。 - layout：分页组件布局。其中total表示总记录数，sizes表示每页显示条数选择器，prev表示上一页按钮，pager表示页码按钮，next表示下一页按钮，jumper表示跳转输入框和确定按钮。 - :total：总记录数，绑定到total属性。 3. 在getData方法中获取数据并更新表格数据和总记录数 ``` getData() { //计算分页查询的参数 const start = (this.currentPage - 1) * this.pageSize; const limit = this.pageSize; //发起分页查询请求 axios.get('/api/data', { params: { start, limit } }).then(response => { this.tableData = response.data.rows; //更新表格数据 this.total = response.data.total; //更新总记录数 }); } ``` 以上就是使用Vue Element UI实现表格数据分页功能的步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值