element页码在table表格中的使用

最新推荐文章于 2023-07-26 16:58:10 发布

原创最新推荐文章于 2023-07-26 16:58:10 发布 · 324 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui #javascript

本文展示了在Vue.js应用中如何使用表单绑定和分页组件来实现报警信息的搜索和显示。通过绑定表单模型`policeForm`，同步页数和每页大小，实现了页面和后端接口的交互。`handlePolice`方法处理搜索和更新数据，而`handleQuery`和`resetQuery`则分别用于执行查询和重置操作。API接口`soundList`使用GET方法获取报警信息。

Dom部分

1、表单绑定 policeForm

<el-form ref="policeForm" :model="policeForm" style="display: flex;"> </el-form>

2、通过绑定的policeForm来同步页数，后期保证搜索的实现

<pagination v-show="total > 0" :total="total" :page.sync="policeForm.pageNum" :limit.sync="policeForm.pageSize" @pagination="handlePolice" />

js部分

return中定义变量

policeForm: {

pageNum: 1,

pageSize: 10,

name: null,

methods方法中接口中传入参数例如：handlePolice 为点击事件

handlePolice() {

soundList(this.policeForm).then(response => {

this.policeList = response.rows //table列表赋值

this.total = response.total; // 列表条目数

this.policeOpen = true //弹窗显示参数

this.title = '报警信息查询'

})

/** 报警信息搜索按钮操作 */

handleQuery() {

this.loading = true;

this.policeForm.pageNum = 1;

this.loading = false;

this.handlePolice();

/** 报警信息重置按钮操作 */

resetQuery() {

this.reset();

this.handleQuery();

APi中搜索接口的写法

// 获取报警信息请求
export function soundList(query) {
  return request({
    url: '/system/sound/list',
    method: 'get',
    params: query
  })
}