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

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

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

瀏覽:29日期: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
相關文章:
主站蜘蛛池模板: 压砖机_电动螺旋压力机_粉末成型压力机_郑州华隆机械tel_0371-60121717 | LINK FASHION 童装·青少年装展 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | TMT观察网_独特视角观察TMT行业| 尾轮组_头轮组_矿用刮板_厢式刮板机_铸石刮板机厂家-双驰机械 | 上海恒驭仪器有限公司-实验室平板硫化机-小型平板硫化机-全自动平板硫化机 | 烟气换热器_GGH烟气换热器_空气预热器_高温气气换热器-青岛康景辉 | 精密模具加工制造 - 富东懿 | 上海橡胶接头_弹簧减震器_金属软接头厂家-上海淞江集团 | 隆众资讯-首页_大宗商品资讯_价格走势_市场行情 | 高低温老化试验机-步入式/低温恒温恒湿试验机-百科 | 冷却塔厂家_冷却塔维修_冷却塔改造_凉水塔配件填料公司- 广东康明节能空调有限公司 | 选矿设备-新型重选设备-金属矿尾矿重选-青州冠诚重工机械有限公司 | 酒万铺-酒水招商-酒水代理 | 三轴曲线机-端子插拔力试验机|华杰仪器 | 六维力传感器_六分量力传感器_模腔压力传感器-南京数智微传感科技有限公司 | 老房子翻新装修,旧房墙面翻新,房屋防水补漏,厨房卫生间改造,室内装潢装修公司 - 一修房屋快修官网 | 迪威娱乐|迪威娱乐客服|18183620002| 【灵硕展览集团】展台展会设计_展览会展台搭建_展览展示设计一站式服务公司 | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 山东成考网-山东成人高考网| 防勒索软件_数据防泄密_Trellix(原McAfee)核心代理商_Trellix(原Fireeye)售后-广州文智信息科技有限公司 | 玻璃钢型材-玻璃钢风管-玻璃钢管道,生产厂家-[江苏欧升玻璃钢制造有限公司] | 济南菜鸟驿站广告|青岛快递车车体|社区媒体-抖音|墙体广告-山东揽胜广告传媒有限公司 | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 | 组织研磨机-高通量组织研磨仪-实验室多样品组织研磨机-东方天净 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 过滤器_自清洗过滤器_气体过滤器_苏州华凯过滤技术有限公司 | 全自动不干胶贴标机_套标机-上海今昂贴标机生产厂家 | 香蕉筛|直线|等厚|弧形|振动筛|香蕉筛厂家-洛阳隆中重工 | 承插管件_不锈钢承插管件_锻钢高压管件-温州科正阀门管件有限公司 | 抖音短视频运营_企业网站建设_网络推广_全网自媒体营销-东莞市凌天信息科技有限公司 | 科研ELISA试剂盒,酶联免疫检测试剂盒,昆虫_植物ELISA酶免试剂盒-上海仁捷生物科技有限公司 | 打孔器,打孔钳厂家【温州新星德牌五金工具】 | 大型低温冷却液循环泵-低温水槽冷阱「厂家品牌」京华仪器_京华仪器 | 德州网站制作 - 网站建设设计 - seo排名优化 -「两山建站」 | 企业管理培训,企业培训公开课,企业内训课程,企业培训师 - 名课堂企业管理培训网 | 小型玉石雕刻机_家用玉雕机_小型万能雕刻机_凡刻雕刻机官网 | 激光内雕_led玻璃_发光玻璃_内雕玻璃_导光玻璃-石家庄明晨三维科技有限公司 激光内雕-内雕玻璃-发光玻璃 | 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 亮化工程,亮化设计,城市亮化工程,亮化资质合作,长沙亮化照明,杰奥思【官网】 | 精密模具-双色注塑模具加工-深圳铭洋宇通 | 耐磨焊丝,堆焊焊丝,耐磨药芯焊丝,碳化钨焊丝-北京耐默公司 |