vue实现就诊人信息的增删改查

本项目中使用 bootstray框架进行页面的设计，使用mock.js插件随机生成数据

这是分页部分的html代码，其余部分html将不作展示

<nav aria-label="Page navigation example"><ul class="pagination" @click="test($event)"><li class="page-item"><a class="page-link" href="#"><</a></li><li class="page-item" v-for="item in total"><a class="page-link" href="#">{{item}}</a></li><li class="page-item"><a class="page-link" href="#">></a></li></ul></nav>

let v1 = new Vue({el: '#app',data(){return{//定义用户数组people:[],//定义新增就诊人数组newpeople:{},//储存修改用户数据testpeople:{},changename:'',changeid:'',changephone:'',indexx:'',//定义页数pageNum:5,//当前页数toPage:1,};},computed:{//定义页数按钮数量total:{get:function(){let totalNum=this.people.length;let page = Math.ceil(totalNum/this.pageNum);//向上取整return page}},},methods:{test(e){       //点击加减页数let str = e.path[0].innerText;//console.log(str.charCodeAt());if (str.charCodeAt() == 60) {if (this.toPage > 1) {this.toPage--;}} else if (str.charCodeAt() == 62) {if (this.toPage < this.total) {this.toPage++;}}else{this.toPage = Number(str);}//console.log(this.toPage);},deleteItem: function (index) {   //删除就诊人信息this.people.splice((this.toPage-1)*this.pageNum+index,1) //console.log((this.toPage-1)*this.pageNum+index)  //通过下标删除},saveAdd:function(){      //新增就诊人的保存按钮this.people.push(this.newpeople);this.newpeople=[];},showUser:function(index){    //编辑就诊人信息（显示原有信息）let changeNum = (this.toPage-1)*this.pageNum+index;console.log(changeNum);this.changename=this.people[changeNum].name;this.changeid=this.people[changeNum].id;this.changephone=this.people[changeNum].phone;this.indexx=changeNum;},saveChange:function(){     //编辑就诊人的保存按钮this.people[this.indexx].name=this.changename;this.people[this.indexx].id=this.changeid;this.people[this.indexx].phone=this.changephone;},},mounted() {//随机生成数据let userArr = [];                   for(let i=0;i<13;i++){let userInfo = {};userInfo.name = Mock.Random.cname();userInfo.id = Mock.Random.id();userInfo.phone = Mock.Random.string('number',11);userArr.push(userInfo)};  this.people = userArr;},});

vue实现就诊人信息的增删改查相关推荐

java 学生信息的增删改查_学生信息的增删改查(java)
学生信息的增删改查注意:此处用到的是access数据库. 运行后效果如图: 代码如下: package example; import java.awt.*; import java.awt.eve ...
python学生信息管理系统-增删改查-根据姓名查询
学生信息管理系统增删改查,求平均年龄,退出系统,根据姓名查询 def show_menu():print('*******欢迎使用学生管理系统*************')print('****** ...
Java语言写一个简单的学生信息管理系统，通过JDBC连接数据库对学生信息进行增删改查，采用三层思想和DBUtils第三方框架。
我把源代码和sql文件放GitHub上了,你们可以自行下载:https://github.com/fenglily1/student. 有问题可以留言或私信,我看到就会回. 进阶版加上页面的管理系统在 ...
Python编程模拟SQL语句实现对员工信息的增删改查
一.问题描述用 Python 模拟 sql 语句,实现对员工信息的增删改查. 封装函数,传入参数:文件路径和 sql 命令. 模拟 sql 语句实现对员工信息的现增删改查,并打印结果. 二.Pyth ...
vue访问php时做增删改查,node连接mysql生成接口，vue通过接口实现数据的增删改查（一）...
武汉加油遇新是直朋能到分览支体调!中国加油! 想必许多干用是处框它观有理近货框万理架是察放是近学vue的小伙伴想连接数据库,对数据进行增删改查吧,奈何不知道怎么实现.作为一路踩坑的我,为大家带来我的一 ...
从零开始的VUE项目-03（数据的增删改查）
代码svn地址 (用户名:liu,密码;123) 这一篇中,我们要实现的基本就是这么个东西这个页面就是我们创建的DataManagement.vue页面,我们的主要代码将写在这里面,这个表格我们将用 ...
springboot/vue前后端分离后台管理系统增删改查
1.需求分析一个音乐管理系统包括: 1.用户信息管理:该模块主要由管理员进行操作,将所有用户的用户名.密码.邮箱.创建时间以及用户状态列在一张表,管理员可以进行增加.删除(批量删除).修改以及查询用 ...
学生信息管理系统（连接数据库，面向对象的方法实现学生信息的增删改查操作）...
---------------------------------------------------------------------------------------------------- ...
SpringMVC-RestfulCRUD || 员工信息表增删改查操作的具体实现
SpringMVC-RestfulCRUD 利用SpringMVC做一个CRUD(增删改查)符合Rest风格的: C:Create:创建 R:Retrieve:查询 U:Update:更新 D:Del ...

vue实现就诊人信息的增删改查

vue实现就诊人信息的增删改查相关推荐

最新文章

热门文章