Element-Plus中表格及分页功能

已于 2024-05-28 16:28:23 修改
阅读量860 收藏 5
点赞数 11
文章标签： vue.js elementui javascript 前端 html5
于 2024-05-28 13:52:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GLimerence/article/details/139264302
版权

导入Element-Plus

具体步骤如下：（内容参照官网：安装 | Element Plus）

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

在main.js文件的引入 

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

完成以上步骤后即可在官网组件部分查找自己想用的插件进行使用了。 

VUE2版本方式

一、将官网中HTML源码复制到自己的文件中，对其中的参数进行修改。主要修改的是数据的绑定和部分样式的选择。
  <div class="demo-pagination-block">
    <div class="example-demonstration">
      <el-table :data="currentData" style="width: 100%">
        <el-table-column fixed type="index" :index="indexMethod" label="序号" width="50" />
        <el-table-column prop="nativeTip" show-overflow-tooltip label="本国子目" width="100" />
        <el-table-column prop="childrenTip" show-overflow-tooltip label="子目条文" width="100" />
        <el-table-column prop="date" label="数据版本" width="100" />

        <el-table-column fixed="right" label="操作" width="60">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.$index)">
              详细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!-- 分页器 -->
    <el-pagination v-model:current-page="searchParams.pagenum" v-model:page-size="searchParams.pagesize" :small="small"
      :disabled="disabled" background layout="total,prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

说明：这里我用了首列索引来作为表头元素，但索引值并不是渲染在页面上副本数组中的索引，而是通过该索引计算后的值（即需要渲染在页面上的值），所以通过:index="indexMethod"，绑定了indexMethod方法，该方法在methods中定义。

二、将JavaScript中的源码复制后进行修改
	export default {
		data() {
			return {
				searchParams: {
					pagesize: 5, //页面条数
					pagenum: 1, //当前页
				},
				total: 0,
				disabled: false, //是否禁选
				small: true,
				currentData: [], //渲染在页面上的副本
				tableData: [//虚拟数据
						{
						nativeTip: 'Cals',
						childrenTip: 'Tom',
						date: '2016-05-02',

					},
					{
						nativeTip: 'Sdaornia',
						childrenTip: 'Tom',
						date: '2016-05-22',

					},
					{
						nativeTip: 'Csfofif',
						childrenTip: 'Tom',
						date: '2016-05-21',

					}, {
						nativeTip: 'Gsdaw',
						childrenTip: 'Tom',
						date: '2016-05-11',

					}, {
						nativeTip: '2016-05-12',
						childrenTip: 'Tom',
						date: 'California',

					}, {
						nativeTip: 'FedDsa',
						childrenTip: 'Tom',
						date: '2016-05-04',

					},
					{
						nativeTip: 'California',
						childrenTip: 'Tom',
						date: '2016-05-31',

					}, {
						nativeTip: 'California',
						childrenTip: 'Tom',
						date: '2016-05-01',

					}, {
						nativeTip: 'California',
						childrenTip: 'Tom',
						date: '2016-05-04',

					}
				]
			};
		}
		
	}

 说明：这里用的是虚拟数据，所以需要一个副本将虚拟数据的内容进行深拷贝，然后根据当前页面大小和当前页数进行计算，将最终的副本数据进行渲染到页面上。步骤如下：

  1. 每次调用切换页面都将虚拟数据进行深拷贝到副本数据中。
  2. 对副本数据进行处理，根据要渲染第几页数据、一页有几条数据进行裁剪。
  3. 将最终的副本渲染到页面上。
methods: {
		
			// 修改索引
			indexMethod(index) {
				return index + 1 + (this.searchParams.pagenum - 1) * this.searchParams.pagesize
			},

			handleSizeChange(e) {
				console.log('SizeChange', e)

			},
			// 切换当前页面
			handleCurrentChange(e) {
				console.log('CurrentChange', e)

				this.searchParams.pagenum = e

				// 1.将获取到的数据存入副本中 深拷贝
				this.currentData = JSON.parse(JSON.stringify(this.tableData))
				console.log(this.tableData)
				// 2. 对数据进行处理
				let len = this.currentData.length //数据总条数
				console.log(len)
				this.total = len
				console.log('this.total', this.total)
				let num = len - this.searchParams.pagesize //判断是否过长了 多了多少个元素
				console.log(num)
				if (num > 0 && this.searchParams.pagenum === 1) {
					// 2.1 如果是第一页 且长度超过了页面展示长度
					// 进行裁剪 从页面展示的最后一个元素开始 一共num个元素
					this.currentData.splice(this.searchParams.pagesize, num)
					console.log(this.currentData)
				} else if (num > 0 && this.searchParams.pagenum !== 1) {
					// 数据过长 但不是第一页
					// 2.2.1 先裁剪掉前面的元素
					this.currentData.splice(0, (this.searchParams.pagenum - 1) * this.searchParams.pagesize)
					// 2.2.2 再裁剪掉后面的元素
					let len2 = this.currentData.length //判断是否过长了 还多了多少个元素
					if (len2 - this.searchParams.pagesize > 0) {
						this.currentData.splice((this.searchParams.pagesize), len2 - this.searchParams.pagesize)
					}

				}

			}
		},
		onLoad() {
			this.handleCurrentChange(1)
			
		}
项目成果： 

VUE3版本方式

 Vue3和Vue2的区别

两个最本质的区别在于拷贝，因为Vue3使用的是组合式API，所以在响应式基础上，能够对data中的数组进行直接拷贝渲染。

完整项目实例：
<template>

  <div>
    <!-- 面包屑 :separator-icon="ArrowRight"-->
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账号列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白色内容区域 -->
    <div class="page_content">
      <div class="flex">
        <div class="input_box">
          <el-input v-model="searchParams.query" placeholder="搜索关键字" class="input-with-select">
            <template #append>
              <el-button @click="searchList"><el-icon>
                  <Search />
                </el-icon></el-button>
            </template>
          </el-input>
        </div>
        <el-button type="primary" @click="addUser">新建用户</el-button>
      </div>
      <!-- 表格 -->
      <!-- 
              el-table  的  data:要展示的数据数组
              el-table-column：列 prop每条数据的对应属性
                label：列标题
                scope.row:相当于一条数据
             -->
      <el-table :data="users" style="width: 100%">
        <el-table-column prop="username" label="姓名" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="mobile" label="电话" />
        <el-table-column prop="role_name" label="角色" />
        <el-table-column prop="mg_state" label="状态">
          <!-- <template #default="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="switchChange(scope.row)"
            />
          </template> -->
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="editRow(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <!-- mg_state 状态 -->
      </el-table>
      <!-- 分页 -->
      <el-pagination v-model:currentPage="searchParams.pagenum" v-model:page-size="searchParams.pagesize"
        :page-sizes="[1, 3, 5, 10]" layout="total, sizes, prev, pager, next" :total="total" @size-change="searchList"
        @current-change="searchList" />
    </div>
    
    <!-- 编辑弹窗 -->
    <el-dialog v-model="dialogFormEVisible" title="编辑用户">
      <!-- 
                表单 
                | email    | 邮箱     | 可以为空 |
                | mobile   | 手机号   | 可以为空 |
             -->
      <el-form ref="userForm2" :model="formData2" :rules="rules2">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData2.email" placeholder="请输入用户邮箱" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formData2.mobile" placeholder="请输入用户手机号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex">
          <el-button>取消</el-button>
          <el-button type="primary" @click="submitEForm(userForm2)">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { toRefs, reactive, ref } from "vue";
// import { ArrowRight } from "@element-plus/icons-vue";
export default {
  name: "userList",
  setup() {
    const data = reactive({
      searchParams: {
        query: "",
        pagesize: 5,
        pagenum: 1,
      },
      total: 0,
      userList: [
        {
          username: "谭梦寻",
          email: "1232412@qq.com",
          mobile: "123123312312",
          role_name: "管理员",
          mg_state: "正常",
          id: 0,
        },
        {
          username: "江青影",
          email: "123242312@qq.com",
          mobile: "12312331231",
          role_name: "用户",
          mg_state: "正常",
          id: 1,
        },
        {
          username: "诸葛亮",
          email: "1232122@qq.com",
          mobile: "12312331231",
          role_name: "用户",
          mg_state: "正常",
          id: 2,
        },
        {
          username: "刘伯温",
          email: "1231232@qq.com",
          mobile: "12312331231",
          role_name: "用户",
          mg_state: "正常",
          id: 3,
        },
        {
          username: "张角",
          email: "1231232@qq.com",
          mobile: "13344431323",
          role_name: "用户",
          mg_state: "正常",
          id: 4,
        },
        {
          username: "刘备",
          email: "1231232@qq.com",
          mobile: "13344434343",
          role_name: "用户",
          mg_state: "正常",
          id: 5,
        },
        {
          username: "关羽",
          email: "1231232@qq.com",
          mobile: "12542331231",
          role_name: "用户",
          mg_state: "正常",
          id: 6,
        },
        {
          username: "曹操",
          email: "1231232@qq.com",
          mobile: "15678331231",
          role_name: "用户",
          mg_state: "正常",
          id: 7,
        },
      ],
      users: [],
      dialogFormVisible: false,
      dialogFormEVisible: false,
      formData: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      formData2: {
        id: "",
        email: "",
        mobile: "",
      },
      rules: {
        username: [{ required: true, message: "此项为必填", trigger: "blur" }],

        password: [{ required: true, message: "此项为必填", trigger: "blur" }],
        email: [
          {
            required: false,
            pattern:
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "请填写正确邮箱",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: false,
            pattern: /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/,
            message: "请填写正确手机号",
            trigger: "blur",
          },
        ],
      },
      rules2: {
        email: [
          {
            required: false,
            pattern:
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "请填写正确邮箱",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: false,
            pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
            message: "请填写正确手机号",
            trigger: "blur",
          },
        ],
      },
    });
    const searchList = () => {
      // 使用正则表达式进行模糊查询
      const searchTerm = data.searchParams.query;
      const regex = new RegExp(searchTerm, "gi");
      console.log(data.searchParams);
      data.users = data.userList;
      data.users = data.users.filter((item) => regex.test(item.username));
      let len = data.users.length;
      let num = len - data.searchParams.pagesize;
      // 获取到的数组长度大于页面展示的长度
      if (num > 0 && data.searchParams.pagenum === 1) {
        console.log("展示首页内容！");
        data.users.splice(data.searchParams.pagesize, num);
      } else if (num > 0 && data.searchParams.pagenum !== 1) {
        console.log("展示后面的内容！");
        console.log(
          "前面要删除的数目：" +
          (data.searchParams.pagenum - 1) * data.searchParams.pagesize
        );
        data.users.splice(
          0,
          (data.searchParams.pagenum - 1) * data.searchParams.pagesize
        );
        // 二次截断
        let len2 = data.users.length;
        data.users.splice(
          data.searchParams.pagesize,
          len2 - data.searchParams.pagesize
        );
      }
      data.total = len;
    };
    const addUser = () => {
      data.dialogFormVisible = true;
    };
    // 新增提交
    const submitForm = (formEl) => {
      // validate
      formEl.validate((res) => {
        if (!res) {
          return;
        }
        // 表单通过对象形式新增到数组中
        // data.userList.push(data.formData);
        data.users.push(data.formData);
        // 隐藏弹窗
        data.dialogFormVisible = false;
        // 清空form
        data.formData = {
          username: "",
          password: "",
          email: "",
          mobile: "",
        };
      });
    };
    // 修改提交
    const submitEForm = (formEl) => {
      formEl.validate((res) => {
        if (!res) {
          return;
        }
        // 提交修改
        console.log(data.formData2);
        data.users[data.formData2.id].email = data.formData2.email;
        data.users[data.formData2.id].mobile = data.formData2.mobile;
        data.dialogFormEVisible = false;
        searchList();
      });
    };
    // 状态更改
    const switchChange = (row) => {
      console.log("操作的那条数据", row);
      if (row) {
        searchList();
      }
    };
    // 数据编辑
    const editRow = (row) => {
      console.log("编辑的那条数据", row);
      const { email, mobile, id } = row;
      // 展示编辑表单
      data.dialogFormEVisible = true;
      data.formData2.email = email;
      data.formData2.mobile = mobile;
      data.formData2.id = id;
    };
    // 删除数据
    const deleteRow = (row) => {
      console.log("删除的那条数据", row);
      let i = 0;
      console.log(row.email);
      for (i; i < data.users.length; i++) {
        if (data.users[i].email === row.email) {
          data.users.splice(i, 1);
        }
      }
      console.log(data.users);
    };

    // 方法初始化
    searchList();
    const userForm = ref();
    const userForm2 = ref();
    return {
      ...toRefs(data),
      searchList,
      addUser,
      submitForm,
      submitEForm,
      userForm,
      userForm2,
      // switchChange,
      editRow,
      deleteRow,
    };
  },
};
</script>
<style scoped>
.input_box {
  width: 200px;
  margin-right: 15px;
}
</style>
项目成果图：

总结： 

Element-Plus虽然给我们提供了框架，但是在实际运用时，还需要根据需求来编写代码逻辑，比如我这里用的是虚拟数据，所以需要利用副本来渲染，每一切换页面都要更新副本数据，假如后端直接提供参数来获取对应页数的数据条数，则不需要这样复杂的过程。

谭梦寻
关注
  • 11
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-plus中el-table分页勾选记住勾选内容并限制数量
attach_uzi的博客
03-26 1190
element-plus中el-table分页勾选记住勾选内容并限制数量
Element_Plus 分页组件 内部样式修改（较详细）
08-11
前后端分离项目
【java爬虫】使用element-plus进行个股详细数据分页展示
haohulala的博客
01-01 1345
前面的文章我们讲述了获取详细个股数据的方法，并且使用echarts对个股的价格走势图进行了展示，本文将编写一个页面，对个股详细数据进行展示。别问涉及到了element-plus中分页的写法，对于这部分知识将会做重点讲解。首先看一下效果之前我一直认为前端分页很难写，不过今天写完这个页面之后我发现，有了element-plus这样的框架，前端真的变得非常简单。本文介绍了后端分页接口以及基于element-plus的分页实现方法，希望对你有所帮助。
前端element-plus表格分页
follow12138的博客
12-25 1071
3.全选通过toggleRowSelection，toggleAllSelection，clearSelection完成全选，清楚全选，选中某条数据操作。1.筛选：添加@filter-change="handleFilterChange"方法。2.排序 @sort-change="sortChange"tableShowData：存储当前页需要展示的数据。transferData：存储筛选操作之后的数据。tableData：存储所有表格数据。3.添加表格可能用到的筛选，排序，多选等功能。
ElementPlus中的分页逻辑与实现
黄钢的博客
12-14 3708
分页是web开发中必不可少的组件，element团队提供了简洁美观的分页组件，配合table数据可以实现即插即用的分页效果。分页的实现可以分成两种，一是前端分页，二是后端分页。这两种分页分别适用于不同的业务场景，分页写了无数回了，但一直记不住，因此记录一下这两种分页效果的逻辑和实现。
使用elmentPlus对表格操作
du_aitiantian的博客
06-25 663
【代码】使用elmentPlus对表格操作。
Element Plus 封装表格组件、表格查询、表格分页、动态表头，可编辑单元格【常用功能版本】
m0_67584973的博客
06-16 6351
Element Plus 封装表格、可编辑单元格、表格查询、表格分页、动态表头组件
vue3+element-plus+mybatisplus实现分页
m0_72618563的博客
08-23 1091
一个小坑会导致分页器无法显示
Vue3+ElementPlus纯前端分页（手撕分页），无需修改后端
weixin_46407807的博客
11-19 1727
3.中的数据由原本的tableData更换为分页处理后的:paginatedData。4.紧接着标签下面加上el-pagination。2.如果有查询的，调用查询后重置页码。1、在script中加上。
Vue3+elementplus含筛选分页实现
最新发布
蜡笔小新1980的博客
03-06 680
描述：表格得到的数据进行筛选排序后再进行展示，所以需要查的内容全部查询出来后进行筛选或排序再进行展示。这里的操作记录我使用的方法，能够实现筛选后的展示情况。 效果：进行整体时间排序，前端，最好是从接口一次性查询出所有数据
element ui 分页器自定义文字
前端开发小白9527
01-28 2491
document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
element-plus的el-pagination分页
weixin_63954739的博客
08-16 2047
接下来是调取数据,首先给后台发送我们data里面的pageNum和pageSize，先获取到我们的初始页面。在项目中要做的分页大概是这个样子 ，其实element-plus框架里面也写的很详细，大概按照他的写就行。data里面写上数据，请求的是要用， pageNum是第一页，pageSize是随机写的。初始页面，之后进行下一页和上一页 ，以及现在一页的条数。写上这几个就完毕了，也把想要的效果的写出来了。
elementui中el-pagination文字自定义
刘婉君的博客
06-28 3165
这里是通过全局修改element配置进行修改。
vue + Element-UI 实现完整版用户列表以及增删改功能
咿呀咿呀呦~
06-04 2737
用户列表已经完全做好，其中包括用户列表查询，数据增删改，以及翻页功能。 <template> <div> <!-- 面包屑导航区域--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <
【Vue学习-element-ui】用户信息列表的实现
qq_44654974的博客
08-04 5217
一、效果 二、功能实现     1.显示所有用户信息      后端查询所有用户信息，前端axios请求获取所有用户信息的JSON字符数组，将获取的信息放在一个allUsers的数组中，用于拉取所有信息（便于查询之后，能够再查询回来）。再把信息赋给tableData(表格显示的data)，最后再把此信息显示方法放在mouted(){}中，一打开页面便显示。 后端代码 //service public JSONArr
框架技术Vue ---- Element plus结合综合案例： 用户列表管理
a23452的博客
03-22 3135
Vue框架 内容管理vue-cli创建项目梳理vue3项目的目录vue2中使用路由模块vue2中使用axios组件库vue组件库和bootstrap的区别Element UI按需引入==vue-cli打包的项目，创建vue.config.js，进行配置==拦截器请求拦截器Token认证请求拦截器 -- Loading效果Proxy跨域代理配置proxy代理Proxy代理和baseURL结合问题综合列表案例初始化项目渲染用户表格数据处理时间格式实现添加、删除用户添加用户对话框dailog关闭时重置表单预验证使
Vue3+Element-Plus 实现表单中数据分页的效果 三三
热门推荐
build2024
12-23 1万+
最终效果： 1. 使用的组件 Pagination 分页组件 <el-pagination v-model:currentPage="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange" @current..
VUE3 +elementplus 分页功能实现
Grizzy的博客
07-17 5510
实现分页非常简单，获取当前页的页数，从而将页数与后端的接口相对应，从而获取数据，数据总量也需要从后端的接口中获得。
基于vue3 ts element-plus生成表格分页查询配置
05-19
好的，我们来一步步实现基于Vue3、TypeScript和Element Plus的表格分页查询配置。 1. 首先我们需要安装Vue3、Vue Router、Element Plus和Axios等依赖： ```bash npm install vue@next vue-router@4.0.0-beta.8 element-plus@next axios ``` 2. 在`main.ts`中引入Vue、VueRouter、Element Plus和Axios： ```typescript import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import axios from 'axios' const app = createApp(App) app.use(router) app.use(ElementPlus) app.config.globalProperties.$axios = axios app.mount('#app') ``` 3. 在`src/components`目录下创建一个`Table.vue`组件，用来展示表格数据： ```html <template> <el-table :data="tableData"> <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column> </el-table> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ props: { columns: { type: Array, default: () => [] }, data: { type: Array, default: () => [] } }, computed: { tableData() { return this.data.map(item => { const row = {} this.columns.forEach(column => { row[column.prop] = item[column.prop] }) return row }) } } }) </script> ``` 4. 在`src/components`目录下创建一个`Pagination.vue`组件，用来展示分页控件： ```html <template> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" ></el-pagination> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ props: { currentPage: { type: Number, default: 1 }, pageSize: { type: Number, default: 10 }, total: { type: Number, default: 0 } }, methods: { handleCurrentChange(currentPage: number) { this.$emit('update:currentPage', currentPage) }, handleSizeChange(pageSize: number) { this.$emit('update:pageSize', pageSize) } } }) </script> ``` 5. 在`src/views`目录下创建一个`TableDemo.vue`视图组件，用来展示表格和分页控件： ```html <template> <div> <el-form :inline="true" :model="query" class="table-demo__form"> <el-form-item v-for="field in fields" :key="field.prop" :label="field.label"> <el-input v-model="query[field.prop]" placeholder="请输入"></el-input> </el-form-item> <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button> </el-form> <Table :columns="columns" :data="data"></Table> <Pagination :currentPage.sync="currentPage" :pageSize.sync="pageSize" :total="total"></Pagination> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import axios from 'axios' import Table from '@/components/Table.vue' import Pagination from '@/components/Pagination.vue' export default defineComponent({ components: { Table, Pagination }, setup() { const fields = [ { prop: 'name', label: '姓名' }, { prop: 'age', label: '年龄' }, { prop: 'gender', label: '性别' } ] const columns = [ { prop: 'name', label: '姓名' }, { prop: 'age', label: '年龄' }, { prop: 'gender', label: '性别' } ] const currentPage = ref(1) const pageSize = ref(10) const total = ref(0) const data = ref([]) const query = ref({ name: '', age: '', gender: '' }) const fetchData = async () => { const res = await axios.get('/api/users', { params: { ...query.value, page: currentPage.value, size: pageSize.value } }) data.value = res.data.items total.value = res.data.total } const handleSearch = () => { currentPage.value = 1 fetchData() } fetchData() return { fields, columns, currentPage, pageSize, total, data, query, handleSearch } } }) </script> <style> .table-demo__form { margin-bottom: 20px; } </style> ``` 6. 在`src/router/index.ts`中配置路由： ```typescript import { createRouter, createWebHashHistory } from 'vue-router' import TableDemo from '@/views/TableDemo.vue' const routes = [ { path: '/', name: 'TableDemo', component: TableDemo } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ``` 7. 在`public`目录下创建一个`api`目录，用来模拟后端接口： ```json // api/users.json { "total": 100, "items": [ { "name": "张三", "age": 18, "gender": "男" }, { "name": "李四", "age": 20, "gender": "女" }, { "name": "王五", "age": 22, "gender": "男" }, { "name": "赵六", "age": 24, "gender": "女" }, { "name": "钱七", "age": 26, "gender": "男" } ] } ``` 8. 在`package.json`中添加一个`dev`命令，用来启动开发服务器： ```json { "scripts": { "dev": "vite" } } ``` 9. 启动开发服务器并访问`http://localhost:3000/`，就可以看到我们的表格和分页控件了。 以上就是基于Vue3、TypeScript和Element Plus的表格分页查询配置的实现步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值