基于Springboot+Element项目实战crud+分页：3_前端程序编写

wyhwust

已于 2024-05-16 21:28:18 修改

阅读量263

点赞数 3

文章标签：前端 spring boot vue.js

于 2024-05-14 21:39:18 首次发布

本文链接：https://blog.csdn.net/wyhwust/article/details/138871410

版权

2023-2024（2）web应用技术专栏收录该内容

34 篇文章 2 订阅

订阅专栏

<!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>