Vue + element.ui table 分页功能+搜索功能的实现

最新推荐文章于 2024-07-25 09:44:40 发布

楷楷大人

最新推荐文章于 2024-07-25 09:44:40 发布

阅读量2k

点赞数 4

文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_43606316/article/details/110396071

版权

本文介绍了如何在Vue项目中结合Element UI库，实现表格的分页和搜索功能。通过示例代码展示具体实现过程，虽然代码略显杂乱，但能帮助开发者理解并应用到实际项目。

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

打算在这个表格里面加上分页的功能
废话不多说直接上代码了，代码写的比较乱，凑合看吧

<template>
  <div>
    <el-table :data="tableData2" style="width: 100%">
      <el-table-column label="Password" prop="Password"> </el-table-column>
      <el-table-column label="Name" prop="name"> </el-table-column>
      <el-table-column
        label="Nianji"
        prop="Nianji"
        column-key="Nianji"
        :filters="[
          { text: '大一', value: '大一' },
          { text: '大二', value: '大二' },
          { text: '大三', value: '大三' },
          { text: '大四', value: '大四' },
        ]"
        :filter-method="filterHandler_Nianji"
      >
      </el-table-column>
      <el-table-column
        label="Zhuanye"
        prop="Zhuanye"
        column-key="ZHuanye"
        :filters="[
          { text: '1', value: '1' },
          { text: '2', value: '2' },
          { text: '3', value: '3' },
          { text: '4', value: '4' },
          { text: '5', value: '5' },
          { text: '6', value: '6' },
          { text: '7', value: '7' },
        ]"
        :filter-method="filterHandler_Zhuanye"
      >