删除操作
1、拿到id或者行数据对象
2、查看后端接口方法,写api方法,将操作连接上后端
后端请求操作成功,但是前端数据表格未更新,最简单的一种方法数据删除后要重新获取数据===》
依旧显示成功,但是前端数据表格未变化,排查后,看封装请求方法的api.js文件,发现:1、方法没有获取参数;2、url有问题
错误的: 正确的:
查询操作 & 刷新(重置条件)操作
1、找合适的组件
2、引入页面,按需修改,绑定点击事件使用
调整样式
3、绑定输入框,获取输入框数据
4、查看后端接口,封装前端api接口。
查询之前做数据表格渲染的时候,已经封装过一次,但查的不是一个,而是全部数据,查看封装的查询api方法:
发先封装好的api接口,是有接收参数的,当调用时不传参,则默认查所有。
所以条件查询可以沿用之前的接口,直接调用,调用的时候传的参数是输入框对象。
而重置则是先将数据对象内容清空后,再查询即查所有。
删除前:删除后:
InfoList.vue
<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}`
})
}