Vue 列表 增删改 前端代码
作者：互联网
<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-button
type="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"
border
style="width: 100%"
stripe
ref="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-dialog
title="提示"
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参数没有改变。依然是3
total(){
if(this.total==(this.page-1)*this.size&& this.total!=0){
this.page-=1;
this.getBookList()
}
}
},
methods: {
handleClose(done) {
done();
},
handleSizeChange(val){
this.size = val
this.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,false,res,列表,book,getBookList,增删,page,size 来源： https://www.cnblogs.com/hailexuexi/p/14924284.html