<!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>
前端学习——vue + elementui实现分页查询
2024-05-14 06:06:12 40 阅读