多个按钮/接口 渲染同一个vue分页表格

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量158 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39408609/article/details/128617332
版权

1.定义公共变量button
2.每个按钮对应方法里，走完接口 覆盖表格的data时，修改button
3. 在分页器绑定的方法里  通过变量button判断下当前的按钮是哪一个  然后走不同的接口

偷偷儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
100行代码实现一个vue分页组功能
12-12
今天用vue来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。所有代码的源码可以再github上下载的到：下载地址 先来看一下实现效果： 点击查看效果 整体思路 我们先看一下使用到的文件的目录： 我们在 pageComponentsTest.vue 页面引入了 pageComponent.vue 分页组件。整体思路是通过 props 来达到组件的灵活通用的效果，整体语法是使用vue的VM语法。 pageComponent.vue实现 首先实现一个分页，需要知道数据总条数，一个页面显示的数据条数和当前显示第几页的数据。那么我们在 pageComponent
用不同按钮控制同一表单的显示内容，element&avue两种方法结合
m0_68993968的博客
10-25 316
用不同按钮控制同一表单上内容的显示，element&avue方法结合
用JAVA实现一个分页类
Crazy for Java！－－narilee的专栏
12-10 998
这里我以从一个用户表中查询用户信息为例演示其用法：1.将PageResultSet.java文件编译成class文件，并放入你的Web应用程序的WEB-INF/classes/com/youngor/util目录下，可以对包名做相应修改。2.在你的Action类中:先从业务处理逻辑类中取出数据(ArrayList或Vector格式)UserBO userBO=new UserBO();Coll
vue项目一个页面接口很多怎么写_vue-cli项目接口地址可配置化（多环境部署）一处修改多处适用...
weixin_39743369的博客
12-20 318
本文档目的在于帮助对vue了解比较少的同学，能够快速配置vue应用中的接口地址。方便项目切换服务环境后，重新修改多组件的http请求地址。一、前言我们在上一篇文章分享了本篇文章我们分享 vue 配置全局对象。在我们平时开发项目的时候，大多数会进行数据交互，这一应用就会使用到交互模块，往往请求的url地址就随着项目模块的增多写在每个模块中，这样的缺点不用我来说，相信大家都知道：模块多了、环境多了很难...
统一分页
幸福有多远
12-24 170
独立的分页统一效果样式： 1，更新nc.scss 2，往分页盒子里添加类ds_nc_pages <div id="demo2" class="ds_nc_pages"></div> getPage(){//渲染 let _this=this; layui.use(['laypage', 'layer'], function(){ var...
VUE+ElementUI实现多表联查分页功能
qq_57031340的博客
06-25 1456
VUE+ElementUI实现多表联查分页功能
vue实现多个button选择不同的button按钮高亮
qq_43653355的博客
08-18 1396
HTML <div v-for="(test,index) in tests" :key="test.name"> <div @click="myMethod(index)" :class="{'show':test.active}"> </div> </div> DATA tests: [ {name:'111',url:'1111',number:'11111'}, {name:'222',
vue中处理多类型button（render方法）
奔跑的面条博客
02-20 3234
文章借鉴于掘金，在这里种草 https://juejin.im/post/5e475829f265da57444ab10f 通过v-if来进行多种类型的判断，会使代码十分复杂，我们需要去封装一个button组件 <template> <div> <h1>I am Home</h1> <!-- 假设按钮有多种类型,通过va...
vue 列表默认隐藏部分，点击显示更多按钮 同页面多个列表使用
LisaWwwang的博客
03-30 4292
项目过程中需求我要在动态循环的数个产品列表中让每个产品列表的的详情列表默认显示三条，点击显示更多按钮则全部显示，再次点击此按钮则回到隐藏到只剩三条的状态。 完成效果展示 首先我们先渲染好产品列表 <template> <div> <div v-for="(item,index) in list" :key="index"> <di...
在Vue 中实现循环渲染多个相同echarts图表
10-15
主要介绍了在Vue 中实现循环渲染多个相同echarts图表，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE写一个简单的表格实例
12-10
目录： 1、脚本式开发. 2、工程化开发 3、工程化和脚本的区别 4、来个table试试水 ...那么前端三大框架，先学哪一个呢？就先学学Vue吧，为啥呢？很简单呀，他只有三个英文字母，好记好写。 Vue的学习时间比较短，
vue之封装多个组件调用同一接口的案例
11-19
背景：项目中有多个组件调用同一接口，为提高代码可维护性，需要封装公共方法 直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success...
vue2编写主体页面
5年编程经验的老猿。
04-28 450
这个示例展示了一个基本的主体页面布局，其中包含了侧边栏、导航栏和主要内容区域。Element UI的el-container、el-aside、el-header和el-main组件被用来创建布局的不同部分，而el-menu和el-submenu组件则用来创建侧边栏的导航菜单
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 558
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
gaoyu007的博客
04-28 335
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
Vue Canvas图片水印的绘制 图片加水印
生产队的驴
04-28 180
/
Vue.js(过渡)
qq_74472152的博客
04-28 667
过渡其实就是一个淡入淡出的效果。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 794
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
无限点击列表下钻同一个接口 加分页vue
05-11
实现这个功能的思路可以是： 1. 在父组件中定义一个列表数据源，将其传递给子组件。 2. 在子组件中使用 v-for 指令渲染列表，同时监听点击事件，当点击某一项时触发父组件的回调函数。 3. 在父组件中的回调函数中，根据点击的项的信息，调用接口获取下一级数据，并将其追加到列表数据源中。 4. 在子组件中，使用分页组件对列表进行分页展示。 以下是示例代码： 父组件： ``` <template> <div> <list :data="list" @clickItem="loadNextLevel"></list> <pagination :total="total" :page.sync="page" @change="loadNextPage"></pagination> </div> </template> <script> import List from './List.vue' import Pagination from './Pagination.vue' import api from './api' export default { components: { List, Pagination }, data() { return { list: [], page: 1, pageSize: 10, total: 0 } }, mounted() { this.loadNextLevel() }, methods: { async loadNextLevel(item) { const data = await api.getNextLevelData(item.id) this.list.push(...data.list) this.total = data.total this.page = 1 }, async loadNextPage(page) { const data = await api.getNextPageData(this.list[0].id, this.pageSize, page) this.list = data.list } } } </script> ``` 子组件 List： ``` <template> <ul> <li v-for="item in data" @click="clickItem(item)"> {{ item.name }} </li> </ul> </template> <script> export default { props: { data: { type: Array, default: () => [] } }, methods: { clickItem(item) { this.$emit('clickItem', item) } } } </script> ``` 子组件 Pagination： ``` <template> <div> <button :disabled="page === 1" @click="changePage(page - 1)">上一页</button> <span>{{ page }} / {{ pageCount }}</span> <button :disabled="page === pageCount" @click="changePage(page + 1)">下一页</button> </div> </template> <script> export default { props: { total: { type: Number, default: 0 }, page: { type: Number, default: 1 }, pageSize: { type: Number, default: 10 } }, computed: { pageCount() { return Math.ceil(this.total / this.pageSize) } }, methods: { changePage(page) { this.$emit('change', page) } } } </script> ``` 其中，api.js 文件需要根据具体业务实现接口调用的逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值