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>

结果

相关推荐
Anson Jiang11 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼14 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
前端君9 小时前
实现最大异步并发执行队列
javascript
知识分享小能手10 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队11 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军11 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy12 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端12 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿12 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js