一、页面效果
二、stulist组件代码
<template>
<div class="container">
<!-- 搜索框 -->
<div style="margin-bottom: 20px">
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
style="width: 300px"
v-model="searchContent"
></el-input>
<el-button type="primary" @click="SearcHandle">搜索</el-button>
</div>
<!-- 学生数据表格 -->
<el-table :data="tableData" border style="width: 100%" fit>
<el-table-column type="index" :index="getIndex" label="序号">
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column prop="education" label="学历"></el-table-column>
<el-table-column prop="phone" label="手机"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column label="操作" min-width="100">
<template slot-scope="scope">
<el-button
type="success"
size="small"
@click="handleEdit(scope.$index, scope.row)"
>更新</el-button
>
<el-button
type="danger"
size="small"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[3, 5, 10, 20]"
:page-size="limit"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"
>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
totalCount: 0,
limit: 3,
currentPage: 1,
searchContent: "",
};
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.limit = val;
this.pageHttp();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
this.pageHttp();
},
// 处理序列号
getIndex(index) {
return (this.currentPage - 1) * this.limit + index + 1;
},
// 发送请求,获取数据
pageHttp() {
// stuhttp 这个是封装的axios请求
this.stuhttp
.get(`/users?_page=${this.currentPage}&_limit=${this.limit}`)
.then((res) => {
this.tableData = res.data;
this.totalCount = ~~res.total;
});
},
// 搜索事件函数
SearcHandle() {
this.stuhttp
.get(
`/users?name_like=${this.searchContent}&_page=1&_limit=${this.limit}`
)
.then((res) => {
this.tableData = res.data;
this.totalCount = ~~res.total;
});
},
handleEdit(index, row) {
console.log(index, row);
this.$router.push(`/addStu/${row.id}`);
},
handleDelete(index, row) {
console.log(index, row);
this.$confirm(`是否要删除这名学生:${row.name} `, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.stuhttp.delete(`/users/${row.id}`).then(() => {
this.pageHttp();
});
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
},
mounted(){
this.stuhttp.get(`/users?_page=1&_limit=${this.limit}`).then((res) => {
this.tableData = res.data;
this.totalCount = ~~res.total;
});
},
computed: {},
};
</script>