vue纯前端增删改查分页

话不多说上代码

<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纯前端增删改查分页相关推荐

servlet增删改查实例_SpringMVC4+MyBatis3+SQLServer 2014 整合（包括增删改查分页）
前言说起整合自然离不开ssm,我本身并不太喜欢ORM,尤其是MyBatis,把SQL语句写在xml里,尤其是大SQL,可读性不高,出错也不容易排查. 开发环境 idea2016.SpringMVC4 ...
Vue学习（增删改查、ES6模块化概念）-学习笔记
文章目录 Vue学习(增删改查.ES6模块化概念)-学习笔记增删改查案例 ES6模块化概念 Vue学习(增删改查.ES6模块化概念)-学习笔记增删改查案例 <!DOCTYPE html> ...
springboot+mybatisplus+postgis实现几何点和线串增删改查分页
postgis类型介绍对象分类描述 POINT 点 MULTIPOINT 多点 LINESTRING 线 LINEARRING 线环 MULTILINESTRING 点串 POLYGON 面 MU ...
复习JavaWeb的小项目书籍信息的增删改查分页功能实现Java面试题Session和Cookie的基础概念生活【记录一个咸鱼大学生三个月的奋进生活】034
记录一个咸鱼大学生三个月的奋进生活034 JavaWeb的增删改查分页功能实现前期准备工作(数据库连接类和实体类) 数据库建立数据库连接类(DBManager) 书籍信息的实体类(Book) 操作 ...
JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
Flask+VUE 实现页面增删改查显示开发+测试（图文教程附源码）
目录一.新建项目并初始化二.安装依赖 axios.elementUI 三.Vue代码四.进行接口联调五.后端接口优化六.web页面功能测试七.总结八.展望九.附录(截止发文时的代码) ...
springBoot加layui和mybatis后台管理系统增删改查分页登录注销修改密码功能
超市订单管理系统 1 登录页面 1.1 登录点击提交按钮提交form表单使用post请求把(String name, String password)数据传到后台loginController 路径 ...
MyBatisPlus：实现DAO的增删改查分页+属性设置，代码生成器（代码模板）
1,MyBatisPlus入门案例与简介这一节我们来学习下MyBatisPlus的入门案例与简介,这个和其他课程都不太一样,其他的课程都是先介绍概念,然后再写入门案例.而对于MyBatisPlus的 ...
vue结合php增删改查实例,从vue基础开始创建一个简单的增删改查的实例
1.安装vue-clicnpm install vue-cli -g --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目 ...

vue纯前端增删改查分页

vue纯前端增删改查分页相关推荐

最新文章

热门文章