<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过axios获取数据</title>
<link rel="stylesheet" href="js/element.css">
</head>
<body>
<div id="app">
<el-table
:data="tableData.filter(data => !search || data.author.includes(search))"
style="width: 100%">
<el-table-column
label="id"
prop="id"
style="width: 10%">
</el-table-column>
<el-table-column
label="姓名"
prop="author"
style="width: 10%">
</el-table-column>
<el-table-column
label="性别"
prop="gender"
style="width: 10%">
</el-table-column>
<el-table-column
label="朝代"
prop="dynasty"
style="width: 10%">
</el-table-column>
<el-table-column
label="头衔"
prop="title"
style="width: 20%">
</el-table-column>
<el-table-column
label="风格"
prop="title"
style="width: 20%">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit()">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete()">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:current-page="pageNum"
:page-size="pageSize"
:total="totale"
@current-change="findAll"
@prev-click="findAll"
@next-click="findAll">
</el-pagination>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<!-- 引入组件库 -->
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: '#app',
data: {
pageNum: 1,
pageSize: 3,
search: '',
tableData: [],
totale:null
},
methods: {
findAll(num) {
this.pageNum = num;
var url = `peot/${this.pageNum}/${this.pageSize}`
axios.get(url)
.then(res => {
this.tableData = res.data.data.rows;
this.totale=res.data.data.total;
})
.catch(error => {
// 在这里处理可能的错误
console.error("Error fetching data:", error);
});
}
},
created() {
this.findAll(this.pageNum);
}
})
</script>
</body>
</html>
基于Springboot+Element项目实战crud+分页:3_前端程序编写
于 2024-05-14 21:39:18 首次发布