vue分页?

html

html 复制代码
<template>
  <div style="width: 100%; display: flex; justify-content: center">
    <div class="table_inner">
      <!-- 列表 -->
      <el-table
        :data="tableData.slice((page - 1) * limit, page * limit)"
        height="500"
        style="width: 98%; user-select: none"
      >
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="account" label="账户" />
        <el-table-column prop="pass" label="密码" />
        <el-table-column prop="" label="操作"
          ><template #default="scope">
            <span
              style="color: #53ac6f"
              @click="bian(scope.row, scope.row.imgs)"
              >编辑</span
            >
            <span style="color: red; margin-left: 10%" @click="dele(scope.row)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!-- 页数 -->
  <div class="paging" style="margin-left: 2%">
    <el-pagination
      :current-page="page"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="mt-4"
      v-model:page-size="limit"
      :page-sizes="[5, 10, 15, 20]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

script

javascript 复制代码
<script setup lang="ts">
import axios from "axios";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const tableData = ref([]);
const gid_data = ref([]);
function fun() {
  axios({
    url: "https://c2c.kuxia.top/pcapi/power/account_list", // url
    params: {},
  })
    .then(function (res) {
      console.log(res.data); // 成功回调
      for (let i = 0; i < res.data.data.length; i++) {
        gid_data.value.push(res.data.data[i]);
      }
      tableData.value = res.data.data;
      tableData.value.sort(function (a, b) {
        return a.id - b.id;
      });
      // 分页
      tableData.value = [...res.data.data];
      total.value = res.data.data.length;
    })
    .catch(function (err) {
      console.log(err); // 失败回调
    });
}
fun();
const limit = ref(5); // 每页数据
const page = ref(1); // 默认页数
const total = ref(0); // 总的数据
 
const handleSizeChange = (val) => {
  limit.value = val;
};
const handleCurrentChange = (val) => {
  page.value = val;
};
</script>

结果

相关推荐
Achieve前端实验室14 分钟前
【每日一面】async/await 的原理
前端·javascript·面试
姜至18 分钟前
el-calendar实现自定义展示效果
前端·vue.js
拉不动的猪33 分钟前
webpack分包优化简单分析
前端·vue.js·webpack
德莱厄斯39 分钟前
没开玩笑,全框架支持的 dialog 组件,支持响应式
前端·javascript·github
非凡ghost1 小时前
Affinity Photo(图像编辑软件) 多语便携版
前端·javascript·后端
非凡ghost1 小时前
VideoProc Converter AI(视频转换软件) 多语便携版
前端·javascript·后端
endlesskiller1 小时前
3年前我不会实现的,现在靠ai辅助实现了
前端·javascript
Zyx20071 小时前
用 JavaScript 打造 AI 大脑:前端开发者的新时代——基于 Brain.js 的浏览器端 NLP 实战
javascript·机器学习
麦麦大数据1 小时前
F035 vue+neo4j中医南药药膳知识图谱可视化系统 | vue+flask
vue.js·知识图谱·neo4j·中医·中药·药膳·南药
麦麦大数据2 小时前
F037 vue+neo4j 编程语言知识图谱可视化分析系统vue+flask+neo4j
vue.js·flask·知识图谱·neo4j·可视化·编程语言知识图谱