話不多說上代碼

<template><div><div style="margin-left:200px;"><el-input placeholder="請輸入要查詢名字" style="width:200px;" v-model="cha" clearable></el-input><el-button type="primary" @click="chaxun" style="margin-left:50px;">查詢</el-button></div><div style="margin-left: 100px"><el-table :data="currentpagedata" border style="width: 60%"><el-table-column align="center" label="序號" type="index" width="100"></el-table-column><el-table-column align="center" prop="name" label="姓名" width="200"></el-table-column><el-table-columnalign="center"prop="nickname"label="綽號"width="120"></el-table-column><el-table-column align="center" prop="skill" label="絕招" width="200"></el-table-column><el-table-column align="center" fixed="right" label="操作" width="200"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">編輯</el-button><el-button type="text" size="small" @click="delet(scope.$index,list)">刪除</el-button></template></el-table-column></el-table></div><div style="margin-left: 400px;margin-top:20px;"><el-button @click="prevpage()">上一頁</el-button><span style="margin:0 20px;">第{{currentpage}}頁/共{{totalpage}}頁</span><el-button @click="nextpage()">下一頁</el-button></div><div style="margin:30px 100px"><el-input placeholder="請輸入名字" style="width:200px;" v-model="names" clearable> </el-input><el-input placeholder="請輸入綽號" style="width:200px;margin:0 20px;" v-model="nicknames" clearable> </el-input><el-input placeholder="請輸入絕招" style="width:200px;" v-model="skills" clearable> </el-input><el-button type="success" @click="add" style="margin-left:20px">新增</el-button></div></div> </template><script> export default {name: "zsgc",data() {return {cha:'',names:'',nicknames:'',skills:'',list: [{name: "路飛",nickname: "草帽",skill: "猿王槍",},{name: "索隆",nickname: "路癡",skill: "獅子歌歌",},{name: "山治",nickname: "色河童",skill: "惡魔風腳",},{name: "喬巴",nickname: "貍貓",skill: "藍波球",},{name: "娜美",nickname: "小賊貓",skill: "天候棒",},{name: "羅賓",nickname: "惡魔之子",skill: "千手觀音",},{name: "布魯克",nickname: "骷髏男",skill: "燕尾斬",},{name: "弗蘭奇",nickname: "機器人",skill: "弗蘭奇將軍",},{name: "烏索普",nickname: "絕境之王",skill: "火鳥星",},{name: "薩卡斯基",nickname: "赤犬",skill: "大噴火",},{name: "波魯薩利諾",nickname: "黃猿",skill: "八尺瓊勾玉",},{name: "庫贊",nickname: "青雉",skill: "暴雉嘴",},{name: "羅杰",nickname: "海賊王",skill: "神避",},{name: "艾斯",nickname: "火男",skill: "火拳",},{name: "薩博",nickname: "龍抓手",skill: "火焰龍王",},{name: "玲玲",nickname: "大媽",skill: "威國",},],totalpage:1, //頁數默認第一頁currentpage:1, //當前頁數pagesize:5, //每頁顯示數量currentpagedata:[],//當前頁顯示內容};},created(){var localage = window.localStoragelocalage['a']=JSON.stringify(this.list)var getlist = JSON.parse(localage.getItem('a'))console.log(getlist)},mounted () {// 計算一共有幾頁this.totalpage=Math.ceil(this.list.length / this.pagesize);// 計算得0時設置為第一頁this.totalpage=this.totalpage==0?1:this.totalpage;this.setcurrentpagedata()},methods: {// 新增add(){this.list.unshift({name:this.names,nickname:this.nicknames,skill: this.skills,})this.names=''this.nicknames=''this.skills=''},// 修改handleClick(row) {console.log(row);this.names=row.namethis.nicknames=row.nicknamethis.skills=row.skill},// 刪除delet(index, rows){rows.splice(index, 1);},// 查詢chaxun(){var kan =this.cha || ''var temp =[]var lists=this.listlists.forEach(item => {console.log(item)if(item.name.indexOf(kan) >= 0){temp.push(item)}})this.list=temp},// 分頁setcurrentpagedata(){// 當前頁數let begin = (this.currentpage - 1) * this.pagesize// 當前頁數let end = this.currentpage * this.pagesize// 當頁顯示內容this.currentpagedata= this.list.slice(begin, end)// console.log(this.currentpagedata);},// 上頁prevpage(){if(this.currentpage == 1)returnthis.currentpage--;this.setcurrentpagedata()},// 下頁nextpage(){if(this.currentpage == this.totalpage)returnthis.currentpage++;this.setcurrentpagedata()},}, }; </script>

總結

以上是生活随笔為你收集整理的vue纯前端增删改查分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。