在
Vue.js中，
使用Element UI组件库可以很方便地实现
分页查询和条件查询。以下是一个简单的例子，可以帮助你理解如何
使用Element UI组件库实现
分页查询和条件查询：
HTML代码：
```
<template>
<div>
<el-form :inline="true" :model="queryForm" class="query-form">
<el-form-item label="姓名">
<el-input v-model="queryForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="queryForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query">查询</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-pagination
@
size-change="handle
SizeChange"
@current-change="handleCurrentChange"
:current-
page="current
Page"
:
page-
sizes="[10, 20, 30, 40]"
:
page-
size="
pageSize"
:total="total">
</el-pagination>
</div>
</template>
```
JavaScript代码：
```
<script>
export default {
data () {
return {
queryForm: {
name: '',
age: ''
},
tableData: [],
current
Page: 1,
pageSize: 10,
total: 0
}
},
methods: {
query () {
// 执行查询操作
this.getTableData()
},
getTableData () {
// 模拟异步请求数据
setTimeout(() => {
// 根据条件查询数据
let data = this.data.filter(item => {
return item.name.includes(this.queryForm.name) && item.age.includes(this.queryForm.age)
})
// 计算
分页数据
let start = (this.current
Page - 1) * this.
pageSize
let end = start + this.
pageSize
let
pageData = data.slice(start, end)
// 更新表格数据和
分页信息
this.tableData =
pageData
this.total = data.length
}, 1000)
},
handle
SizeChange (
pageSize) {
this.
pageSize =
pageSize
this.getTableData()
},
handleCurrentChange (current
Page) {
this.current
Page = current
Page
this.getTableData()
}
},
mounted () {
// 初始化查询数据
this.getTableData()
}
}
</script>
```
在上面的代码中，我们
使用了
Element UI的el-form和el-table组件来实现条件查询和表格渲染。在el-form组件中，我们
使用v-model指令来绑定查询条件到queryForm对象上，并在el-button组件中
使用@click事件来触发查询操作。在el-table组件中，我们
使用:data指令来绑定表格数据到tableData对象上，并
使用el-table-column组件来定义表格列。最后，我们
使用el-pagination组件来实现
分页功能，并
使用@
size-change和@current-change事件来处理
分页信息的变化。
在getTableData方法中，我们
使用setTimeout模拟了一个异步请求数据的过程，并根据查询条件过滤数据。然后，我们根据当前页码和每页条数计算
分页数据，并更新表格数据和
分页信息。
希望这个例子能帮助你理解如何
使用Element UI组件库实现
分页查询和条件查询。
超级会员免费看
订阅专栏 解锁全文
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
