电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue+iview實現分頁及查詢功能

瀏覽:30日期:2022-10-26 11:34:56

vue+iview 分頁及刪、查功能實現

首先要想實現分頁功能必須得知道 當前頁碼、每頁大小、總數目。

iview對分頁的功能支持還是很強大的,有很多鉤子函數

具體實現看后端返回的數據

<template> <div v-if='this.$store.state.user.userType == 0 || this.$store.state.user.userType == 1'> <Input type='text' search enter-button placeholder='根據施工人員姓名查找' v-model='peopleName' @input='search'/> <Table :columns='peopleCol' :data='peopleDat'></Table> <!--通過sync修飾符可以動態獲取頁碼--> <Page :total='dataCount' :current.sync='current' :page-size='pageSize' show-total @on-change='changePage'></Page> <!--該modal是刪除提醒框--> <Modal v-model='confirmDelete' width='360'> <p slot='header' style='color:#f60;text-align:center'> <Icon type='ios-information-circle'></Icon> <span>刪除確認</span> </p> <div style='text-align:center'> <p>此操作不可恢復,確定要刪除嗎?</p> </div> <div slot='footer'> <Button size='large' @click='cancelDelete'>取消</Button> <Button type='error' size='large' @click='deleteConfirm'>刪除</Button> </div> </Modal> </div></template><script> export default { components: { addWorker, updateWorker }, data () { return { selectedID:’’,//刪除選中的ID confirmDelete:false,//刪除提示框 current:1, isShow:false, selectedList:{},//選中施工人員的id值 peopleName:’’, dataCount:0,//總條數 pageSize:2,//每頁顯示數據條數 peopleDat: [], peopleCol: [ { title: ’操作’, key: ’action’, width: 120, render: (h, params) => { return h(’Button’, { props: { type: ’error’, size: ’small’ }, on:{ click: ()=>{ this.confirmDelete=true this.delete(params.row.peopleID) } }}, ’刪除’) } } ], } }, mounted() { this.getWorkerList() }, methods:{ getWorkerList(){//組件初始化顯示的數據 const currPage=1 const pageSize=this.pageSize //下面是向后臺發送請求 setTimeout(async()=>{ const r=await getWorkers(currPage,pageSize) if(r.data.success){ this.dataCount=r.data.list.count//初始化總條數 this.peopleDat=r.data.list.data//默認頁列表渲染數據 console.log(r) } }) }, changePage(index){//頁碼改變觸發的函數 //index當前頁碼 const currPage=index const pageSize=this.pageSize setTimeout(async ()=>{ const r=await changePage(currPage,pageSize) if(r.data.success){ this.peopleDat=r.data.list.data//當前頁列表數據 } }) }, search(){ const peopleName=this.peopleName const pageSize=this.pageSize setTimeout(async()=>{ const r=await search(peopleName,pageSize) if(r.data.success){ this.peopleDat=r.data.list.data this.dataCount=r.data.list.count//如果不設置總條數那么當精確查詢時每頁都會有數據這得看后端返回的數據有沒有這些數據 } else { this.$Message.warning(’查詢失敗!’) } }) }, delete(peopleID){ this.selectedID=peopleID }, deleteConfirm(){ const id=this.selectedID setTimeout(async ()=>{ const r=await deleteWorker(id) if(r.data.success){ //這里做的一個功能是當你刪除某頁數據后立即刷新當前頁的數據 this.changePage(this.current)//更新當前頁碼的數據 this.$Message.success(’刪除成功!’) } else{ this.$Message.warning(’刪除失敗!’) } }) this.confirmDelete=false }, cancelDelete(){ this.confirmDelete=false this.$Message.info(’你取消了刪除操作’) } } }</script><style scoped> .paging{ float:left; margin-top:10px; }</style>

關于vue.js的學習教程,請大家點擊專題vue.js組件學習教程、Vue.js前端組件學習教程進行學習。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 污水处理设备维修_污水处理工程改造_机械格栅_过滤设备_气浮设备_刮吸泥机_污泥浓缩罐_污水处理设备_污水处理工程-北京龙泉新禹科技有限公司 | 干培两用箱-细菌恒温培养箱-菲斯福仪器 | 顺景erp系统_erp软件_erp软件系统_企业erp管理系统-广东顺景软件科技有限公司 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | 无线遥控更衣吊篮_IC卡更衣吊篮_电动更衣吊篮配件_煤矿更衣吊篮-力得电子 | 北京公积金代办/租房发票/租房备案-北京金鼎源公积金提取服务中心 | 道达尔润滑油-食品级润滑油-道达尔导热油-合成导热油,深圳道达尔代理商合-深圳浩方正大官网 | 游泳池设计|设备|配件|药品|吸污机-东莞市太平洋康体设施有限公司 | 房屋质量检测-厂房抗震鉴定-玻璃幕墙检测-房屋安全鉴定机构 | 华夏医界网_民营医疗产业信息平台_民营医院营销管理培训 | 非标压力容器_碳钢储罐_不锈钢_搪玻璃反应釜厂家-山东首丰智能环保装备有限公司 | 北京租车公司_汽车/客车/班车/大巴车租赁_商务会议/展会用车/旅游大巴出租_北京桐顺创业租车公司 | 氧化铝球_高铝球_氧化铝研磨球-淄博誉洁陶瓷新材料有限公司 | 洁净棚-洁净工作棚-无菌室-净化工程公司_北京卫护科技有限公司 | 精益专家 - 设备管理软件|HSE管理系统|设备管理系统|EHS安全管理系统 | 磁力轮,磁力联轴器,磁齿轮,钕铁硼磁铁-北京磁运达厂家 | 湿地保护| 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 球磨机,节能球磨机价格,水泥球磨机厂家,粉煤灰球磨机-吉宏机械制造有限公司 | 高柔性拖链电缆_卷筒电缆_耐磨耐折聚氨酯电缆-玖泰特种电缆 | 质检报告_CE认证_FCC认证_SRRC认证_PSE认证_第三方检测机构-深圳市环测威检测技术有限公司 | 植筋胶-粘钢胶-碳纤维布-碳纤维板-环氧砂浆-加固材料生产厂家-上海巧力建筑科技有限公司 | 水上浮桥-游艇码头-浮动码头-游船码头-码瑞纳游艇码头工程 | 冷水机-冰水机-冷冻机-冷风机-本森智能装备(深圳)有限公司 | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 泰国专线_泰国物流专线_广州到泰国物流公司-泰廊曼国际 | 道康宁消泡剂-瓦克-大川进口消泡剂供应商 | 缓蚀除垢剂_循环水阻垢剂_反渗透锅炉阻垢剂_有机硫化物-郑州威大水处理材料有限公司 | 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 千淘酒店差旅平台-中国第一家针对TMC行业的酒店资源供应平台 | 清管器,管道清管器,聚氨酯发泡球,清管球 - 承德嘉拓设备 | 机构创新组合设计实验台_液压实验台_气动实训台-戴育教仪厂 | 精密模具制造,注塑加工,吹塑和吹瓶加工,EPS泡沫包装生产 - 济南兴田塑胶有限公司 | 济南网站建设_济南网站制作_济南网站设计_济南网站建设公司_富库网络旗下模易宝_模板建站 | 不干胶标签,不干胶标签纸_厂家-山东同力胶粘制品| 爱德华真空泵油/罗茨泵维修,爱发科-比其尔产品供应东莞/杭州/上海等全国各地 | 818手游网_提供当下热门APP手游_最新手机游戏下载 | 三防漆–水性三防漆–水性浸渍漆–贝塔三防漆厂家 | 送料机_高速冲床送料机_NC伺服滚轮送料机厂家-东莞市久谐自动化设备有限公司 | 卫生型双针压力表-高温防腐差压表-安徽康泰电气有限公司 | 广东西屋电气有限公司-广东西屋电气有限公司 |