vue端接收springboot端传来的表格数据

1、成果--实现啦！

2、vue端相关代码

表格界面：

<template>
  <div id="one">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="id" label="Id" width="150" />
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column prop="age" label="Age" width="120" />
      <el-table-column prop="jia" label="JiaXiang" width="120" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
          >Detail</el-button
          >
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination background layout="prev, pager, next"
                     page-size="6"
                     :total="60"
                     @current-change="page">
      </el-pagination>
  </div>
</template>



<script>
export default {
  name: 'PageOne',
  data() {
    return {
      total:null,
      tableData: null,
    }
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo(currentPage) {
      const _this=this;
      _this.$axios.get('http://localhost:8181/student/findAll/1/6')
          .then(Response => {
            if(Response.data!=null){
              _this.tableData = Response.data.content;
              _this.total=Response.totalElements;
            }
            console.log(Response.data.content);
          })
          .catch(Error => {
            alert(Error);
            console.log(Error);
          })
    },
    handleClick(){
      console.log('Detail');
    },

    page(currentPage){
      alert(currentPage);
    }
  }

}

</script>

main.js界面：

加上这两行代码：

import axios from 'axios';
app.config.globalProperties.$axios=axios;

3、注意问题

在从后台获取数据时，看到是content标签包围了我们想要的数据：

所以一定要定位准确：

4、根据每页页数进行数据更换

将这段代码：

复制到page点击得那个方法里面，并将其中的1，2，3等数字页码换成currentPage；

最终的代码为：

<template>
  <div id="one">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="id" label="Id" width="150" />
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column prop="age" label="Age" width="120" />
      <el-table-column prop="jia" label="JiaXiang" width="120" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
          >Detail</el-button
          >
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination background layout="prev, pager, next"
                     page-size="6"
                     :total="60"
                     @current-change="page">
      </el-pagination>
  </div>
</template>



<script>
export default {
  name: 'PageOne',
  data() {
    return {
      total:null,
      tableData: null,
    }
  },
  created() {
    this.page(1);
  },
  methods: {
    handleClick(){
      console.log('Detail');
    },

    page(currentPage){
      const _this=this;
      _this.$axios.get('http://localhost:8181/student/findAll/'+currentPage+'/6')
          .then(Response => {
            if(Response.data!=null){
              _this.tableData = Response.data.content;
              _this.total=Response.totalElements;
            }
            console.log(Response.data.content);
          })
          .catch(Error => {
            alert(Error);
            console.log(Error);
          })
    }
  }

}

</script>

就是有这么一个问题，我只要把这里换成在script里面定义的total值，页码的样式就会消失：

原来是这里定义的问题：

忘记要加data了，直接选择访问的totalElements，故访问不到；