当前位置: article > 正文
Vue2 实现前端分页

作者：我家自动化 | 2024-05-14 09:35:14
踩
Vue2 实现前端分页
<!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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/568227