效果圖

<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实现表格的增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。

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