delete operation
1. Get the id or row data object
2. View the backend interface method, write the api method, and connect the operation to the backend
The back-end request operation is successful, but the front-end data table is not updated. The easiest way is to re-acquire the data after the data is deleted ===》
It still shows success, but the front-end data table has not changed. After checking, look at the api.js file that encapsulates the request method, and find that: 1. The method does not obtain parameters; 2. There is a problem with the url
wrong: right:
Query operation & refresh (reset condition) operation
1. Find the right components
2. Import the page, modify it as needed, and bind the click event to use
adjust style
3. Bind the input box and get the input box data
4. Check the back-end interface and encapsulate the front-end API interface.
When rendering the data table before the query, it has been encapsulated once, but not one, but all the data is checked. Check the encapsulated query api method:
The api interface packaged in advance has receiving parameters. If no parameters are passed when calling, all will be checked by default.
So the conditional query can follow the previous interface and call directly, and the parameter passed when calling is the input box object.
The reset is to clear the content of the data object first, and then query to check all.
Before delete: 
After delete: 
InfoList.view
<template>
<div class="InfoList">
<!-- 查询、重置 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
<el-form-item label="姓名">
<el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="find()">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="refresh()">刷新</el-button>
</el-form-item>
</el-form>
<!-- <el-table :data="
tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
" height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> -->
<el-table
:data="compData"
height="450"
border
style="width: 100%"
:default-sort="{ prop: 'number', order: 'Ascending' }"
>
<!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="number" label="学号" align="center" sortable>
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="sex_text" label="性别" align="center">
</el-table-column>
<el-table-column prop="age" label="年龄" align="center" sortable>
</el-table-column>
<el-table-column prop="class" label="班级" align="center">
</el-table-column>
<el-table-column prop="state_text" label="状态" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
<el-table-column prop="phone" label="联系方式" align="center">
</el-table-column>
<el-table-column fixed="right" label="操作" align="center">
<template slot-scope="scope">
<el-button
@click="del(scope.row)"
icon="el-icon-delete"
type="danger"
size="mini"
circle
></el-button>
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
circle
></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 30, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
import { Info, InfoDel } from "@/api/api.js";
export default {
data() {
return {
tableData: [],
currentPage: 1, //当前页数
pageSize: 10, //每页显示条数
total: 0,
formInline: {
name: ''
}
};
},
created() {
this.getData();
},
computed: {
compData() {
return this.tableData.slice(
(this.currentPage - 1) * this.pageSize,
this.currentPage * this.pageSize
);
},
},
methods: {
find(){
this.getData(this.formInline)
},
refresh(){
this.formInline = {}
this.getData(this.formInline)
},
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
},
handleCurrentChange(val) {
this.currentPage = val;
},
getData(params) {
Info(params).then((res) => {
console.log(res.data);
if (res.data.status === 200) {
this.total = res.data.total;
this.tableData = res.data.data;
this.tableData.forEach((item) => {
item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
item.state === "1"
? (item.state_text = "已入校")
: item.state === "2"
? (item.state_text = "未入校")
: (item.state_text = "休学中");
});
}
});
},
del(row) {
console.log(row);
InfoDel(row.id).then((res) => {
if (res.data.status === 200) {
this.$message({ message: res.data.message, type: "success" });
this.getData();
}
});
},
},
};
</script>
<style lang="scss">
.InfoList {
.demo-form-inline {
text-align: left;
}
.el-pagination {
text-align: left;
margin-top: 20x;
}
}
</style>
api.js
//列表信息的删除接口
export function InfoDel(id){
return service({
method: 'delete',
url: `/students/${id}`
})
}