<template>
<div>
<el-input
v-model="searchQuery"
placeholder="请输入搜索内容"
@keyup.enter.native="search"
></el-input>
<el-button @click="search">搜索</el-button>
<div class="list-container">
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
<div v-if="isLoading" class="loading-text">加载中...</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
list: [],
isLoading: false,
page: 1,
pageSize: 10,
total: 0,
};
},
methods: {
search() {
this.page = 1;
this.list = [];
this.fetchData();
},
fetchData() {
this.isLoading = true;
// 模拟异步请求数据
setTimeout(() => {
const endIndex = this.page * this.pageSize;
for (let i = (this.page - 1) * this.pageSize; i < endIndex; i++) {
if (!this.total || this.list.length < this.total) {
this.list.push({ id: i, name: `Item ${i}` });
}
}
this.isLoading = false;
}, 1000);
}
},
mounted() {
this.fetchData();
}
};
</script>
<style scoped>
.list-container {
max-height: 400px;
overflow-y: auto;
margin-top: 10px;
}
.loading-text {
text-align: center;
margin-top: 10px;
}
</style>这个简单的示例展示了如何使用Vue和Element UI创建一个包含搜索框和上拉加载更多数据列表的页面。代码中包含了搜索方法、数据加载方法以及分页逻辑，并且使用了Element UI的组件。