Element ui table(表格)和pagination(分页)

最新推荐文章于 2024-08-01 11:00:47 发布

爱笑的橘子

最新推荐文章于 2024-08-01 11:00:47 发布

阅读量340

点赞数

分类专栏：业务文章标签： vue.js

本文链接：https://blog.csdn.net/lishuangzxcxc/article/details/112313437

版权

业务专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该博客展示了如何在Vue.js应用中利用Element UI库创建一个包含充值时间、操作人、充值时长、充值套餐和生效账号的数据表格，并通过Axios从后端获取数据。同时，实现了分页功能，当用户切换页面时，会自动调用getData()函数更新表格内容。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; 
border: 1px solid #D2E2FF;"
    >
      <el-table-column prop="createTime" label="充值时间" width="180">
      </el-table-column>
      <el-table-column prop="userName" label="操作人" width="180">
      </el-table-column>
      <el-table-column prop="rechargeDuration" label="充值时长">
      </el-table-column>
      <el-table-column prop="setMeal" label="充值套餐">
              <!-- 字符串变成对象 -->
        <template slot-scope="scope">
          {{ JSON.parse(scope.row.setMeal)[0].name }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="生效账号"> </el-table-column>
    </el-table>
    <el-pagination
      class="page_bottom"
      @current-change="currentChangeHandle"
      :current-page="page"
      :page-size="limit"
      :page-count="totalPage"
      layout="prev, pager, next, jumper"
      :hide-on-single-page="true"
    ></el-pagination>
  </div>
</template>

<script>
import _axios from "config/axios";
export default {
  data() {
    return {
      limit: 10, //最大页数
      page: 1, //当前页码
      totalPage: 1, //总页数
      tableData: [], //数据存放的数组
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      //请求封装成函数
      let params = {
        limit: this.limit,
        page: this.page,
      };
      _axios(
        `/qualityControl/sysdeptqualitybalancerecharge/list`,
        "POST",
        params
      ).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          //code等于0时可以正常访问
          this.tableData = res.data.page.list;
          this.totalPage = res.data.page.totalPage;
        } else {
          this.$alert(res.data.msg, "提示", {
            //报错提示
            confirmButtonText: "确定",
          });
        }
      });
    },
    // 当前页
    currentChangeHandle(val) {
      this.page = val; //改变当前页码
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>