vue+element-ui实现表格的增删改查

效果图

<template><div id="app"><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">图书管理</el-menu-item></el-menu><br /><el-row><el-col :span="1" class="grid"><el-buttontype="success"@click="addFlag=true;dialogVisible = true "icon="el-icon-circle-plus-outline"size="mini"round>新增</el-button></el-col></el-row><br /><el-table:data="bookList"borderstyle="width: 100%"striperef="multipleTable"tooltip-effect="dark"><el-table-column label="序号" type="index" width="80px" align="center"><template slot-scope="scope"><span>{{(page - 1) * size + scope.$index + 1}}</span></template></el-table-column><el-table-column prop="Name" label="书名"></el-table-column><el-table-column prop="Author" label="作者"></el-table-column><el-table-column prop="Type" label="种类"></el-table-column><el-table-column prop="Count" label="数量"></el-table-column><el-table-column label="编辑" width="100"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="mini" @click="editBook(scope.row)">编辑</el-button></template></el-table-column><el-table-column label="删除" width="100"><template slot-scope="scope"><el-button type="danger" icon="el-icon-delete" size="mini" @click="delBook(scope.row)">删除</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page":page-sizes="[5, 10, 20]":page-size="size"style="float:right"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><el-dialog:title="addFlag?'新增图书':'修改图书'"style="text-align:left !important":visible.sync="dialogVisible":before-close="handleClose"><el-form ref="form" label-width="80px"><el-form-item label="书名" style="width:300px"><el-input v-model="book.Name" placeholder="请输入昵称"></el-input></el-form-item><el-form-item label="作者" style="width:280px"><el-input v-model="book.Author" placeholder="请输入作者名"></el-input></el-form-item><el-form-item label="种类" style="width:230px"><el-input v-model="book.Type" placeholder="请输入种类"></el-input></el-form-item><el-form-item label="库存" style="width:190px"><el-input v-model="book.Count" placeholder="请输入库存"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button type="success" @click="saveBook()">提交</el-button><el-button type="primary" @click="dialogVisible = false">取消</el-button></span></el-dialog><el-dialogtitle="提示"style="text-align:left !important":visible.sync="dialog2Visible":before-close="handleClose"><span>你确定要删除这本图书吗?</span><span slot="footer" class="dialog-footer"><el-button @click="handleDel()">提交</el-button><el-button type="primary" @click="dialog2Visible = false">取消</el-button></span></el-dialog></div>
</template><script>
import axios from "axios";
import qs from "qs";
export default {data() {return {dialogVisible: false,dialog2Visible: false,activeIndex2: "1",total: 0,size: 5,page: 1,bookList: [],book: {},addFlag: true,curId: ""};},watch:{//2.x版本的bug 以前用1.x发现没有 假如现在是第三页，只有一条数据了。将其删除，就没有第三页了。应该跳到第二页展示出5条数据。//可是数据没有展示。原因是获取list的时候page参数没有改变。依然是3total(){if(this.total==(this.page-1)*this.size&& this.total!=0){this.page-=1;this.getBookList()}}},methods: {handleClose(done) {done();},handleSizeChange(val){this.size = valthis.getBookList()},handleCurrentChange(val) {this.page = val;this.getBookList();},async getBookList() {try {let res = await axios.post("http://127.0.0.1:8848/api/v1/book/list",qs.stringify({page: this.page,size: this.size}));this.total = res.data.Data.Total;this.bookList = res.data.Data.List;} catch (e) {console.log(e);}},async saveBook() {try {let res = await axios.post("http://127.0.0.1:8848/api/v1/book/save",qs.stringify({id: this.book.ID,name: this.book.Name,type: this.book.Type,author: this.book.Author,count: this.book.Count}));this.dialogVisible = false;this.book = {};this.$message({message: res.data.Msg,type: "success"});this.getBookList();} catch (e) {console.log(e);}},delBook(row) {this.addFlag = false;this.dialog2Visible = true;this.curId = row.ID;},async handleDel() {try {let res = await axios.post("http://127.0.0.1:8848/api/v1/book/del",qs.stringify({id: this.curId}));this.curId = "";this.dialog2Visible = false;this.$message({message: res.data.Msg,type: "success"});this.getBookList();} catch (e) {console.log(e);}},editBook(row) {this.book = row;this.dialogVisible = true;this.addFlag = false;}},mounted() {this.getBookList();},
};
</script><style>
#app {font-family: Helvetica, sans-serif;text-align: center;
}
</style>

vue+element-ui实现表格的增删改查相关推荐

python增删改查的框架layui_spring+springMvc+mybatis+layui实现数据表格的增删改查（纯layui实现）...
[实例简介] 项目描述: 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现. 如果你是新手学习layui,那这个绝对会对你有很大的帮助: 如果你之前已经学过甚至 ...
对表格实现修改查询html,【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
js实现表格的增删改查
这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...
python对excel增删改查语句_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
python对excel增删改查_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
从零开始的VUE项目-03（数据的增删改查）
代码svn地址 (用户名:liu,密码;123) 这一篇中,我们要实现的基本就是这么个东西这个页面就是我们创建的DataManagement.vue页面,我们的主要代码将写在这里面,这个表格我们将用 ...
springboot/vue前后端分离后台管理系统增删改查
1.需求分析一个音乐管理系统包括: 1.用户信息管理:该模块主要由管理员进行操作,将所有用户的用户名.密码.邮箱.创建时间以及用户状态列在一张表,管理员可以进行增加.删除(批量删除).修改以及查询用 ...
vue访问php时做增删改查,node连接mysql生成接口，vue通过接口实现数据的增删改查（一）...
武汉加油遇新是直朋能到分览支体调!中国加油! 想必许多干用是处框它观有理近货框万理架是察放是近学vue的小伙伴想连接数据库,对数据进行增删改查吧,奈何不知道怎么实现.作为一路踩坑的我,为大家带来我的一 ...

vue+element-ui实现表格的增删改查

vue+element-ui实现表格的增删改查相关推荐

最新文章

热门文章