Vue2 实现前端分页_vue前端分页-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_65084919/article/details/138615433
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="./vue/element_ui.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./vue/unocss.js"></script>
    <script src="./vue/vue.js"></script>
    <script src="./vue/element_ui.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="p-20px">
        <div class="flex items-center">
          <div>模糊搜索</div>
          <el-input class="!flex-1 ml-20px" v-model="search"></el-input>
        </div>

        <el-table :data="getTable" height="528px" style="width: 100%">
          <el-table-column prop="orderId" label="订单号" align="center"> </el-table-column>
          <el-table-column prop="name" label="收款人" align="center"> </el-table-column>
          <el-table-column prop="time" label="申请时间" align="center"> </el-table-column>
        </el-table>

        <div class="mt-20px flex justify-end">
          <el-pagination background hide-on-single-page :current-page.sync="page" layout="prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            search: '',
            page: 1,
            total: 0,
            tableData: [
              {
                orderId: 'M022143767997456224',
                name: '李十五',
                time: '2024-02-29 18:07:24',
              },
              {
                orderId: 'M022143767997456224',
                name: '王十六',
                time: '2024-02-29 18:08:35',
              },
              {
                orderId: 'M022143767997456224',
                name: '赵十七',
                time: '2024-02-29 18:09:46',
              },
              {
                orderId: 'M022143767997456224',
                name: '钱十八',
                time: '2024-02-29 18:10:57',
              },
              {
                orderId: 'M022143767997456224',
                name: '孙十九',
                time: '2024-02-29 18:11:02',
              },
              {
                orderId: 'M022143767997456224',
                name: '李二十',
                time: '2024-02-29 18:12:13',
              },
              {
                orderId: 'M022143767997456224',
                name: '王二十一',
                time: '2024-02-29 18:13:24',
              },
              {
                orderId: 'M022143767997456224',
                name: '赵二十二',
                time: '2024-02-29 18:14:35',
              },
              {
                orderId: 'M022143767997456224',
                name: '钱二十三',
                time: '2024-02-29 18:15:46',
              },
              {
                orderId: 'M022143767997456224',
                name: '孙二十四',
                time: '2024-02-29 18:16:57',
              },
              {
                orderId: 'M022143767997456224',
                name: '李二十五',
                time: '2024-02-29 18:17:02',
              },
              {
                orderId: 'M022143767997456224',
                name: '王二十六',
                time: '2024-02-29 18:18:13',
              },
              {
                orderId: 'M022143767997456224',
                name: '赵二十七',
                time: '2024-02-29 18:19:24',
              },
              {
                orderId: 'M022143767997456224',
                name: '钱二十八',
                time: '2024-02-29 18:20:35',
              },
              {
                orderId: 'M022143767997456224',
                name: '孙二十九',
                time: '2024-02-29 18:21:46',
              },
              {
                orderId: 'M022143767997456224',
                name: '李三十',
                time: '2024-02-29 18:22:57',
              },
              {
                orderId: 'M022143767997456224',
                name: '王三十一',
                time: '2024-02-29 18:23:02',
              },
              {
                orderId: 'M022143767997456224',
                name: '赵三十二',
                time: '2024-02-29 18:24:13',
              },
              {
                orderId: 'M722143767997456224',
                name: '钱三十三',
                time: '2024-02-29 18:25:24',
              },
              {
                orderId: 'M822143767997456224',
                name: '孙三十四',
                time: '2024-02-29 18:26:35',
              },
              {
                orderId: 'M922143767997456224',
                name: '李三十五',
                time: '2024-02-29 18:27:46',
              },
              {
                orderId: 'M122143767997456224',
                name: '王三十六',
                time: '2024-02-29 18:28:57',
              },
            ],
          }
        },
        computed: {
          getTable() {
            // 模糊搜索
            if (this.search) {
              const startIndex = (this.page - 1) * 10
              const endIndex = startIndex + 10

              // name择是根据 name字段模糊搜索 然后筛选
              const filterTable = this.tableData.filter((v) => v.name.includes(this.search) || v.orderId.includes(this.search))
              this.total = filterTable.length
              return filterTable.slice(startIndex, endIndex)
            } else {
              // 正常分页
              const startIndex = (this.page - 1) * 10
              const endIndex = startIndex + 10
              this.total = this.tableData.length
              return this.tableData.slice(startIndex, endIndex)
            }
          },
        },
      })
    </script>
  </body>
</html>