系列教程之element 表格操作带分页

最新推荐文章于 2024-07-03 11:19:28 发布

原创

最新推荐文章于 2024-07-03 11:19:28 发布 · 791 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个基于Vue框架的表格数据展示组件，实现了数据的分页显示、编辑和删除功能。通过与后端API的交互，展示了如何在前端进行数据的动态加载和更新，同时提供了修改和删除数据项的交互界面。

App.vue

<template>
  <div>
    <el-card style="margin-top: 20px;">
      <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" header-align="center" sortable  align="center">
        <el-table-column label="序号" type="index" min-width="70" header-align="center"></el-table-column>
        <el-table-column prop="typename" label="名称" header-align="center"  align="center"></el-table-column>
        <el-table-column label="操作" header-align="center"  align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
      <el-dialog title="修改内容" :visible.sync="dialogFormVisible">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="left" label-width="90px">
          <el-form-item label="名称"