element页码在table表格中的使用

最新推荐文章于 2024-11-01 14:29:13 发布

xiaoming_0208

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量267

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/xiaoming4965/article/details/130390474

版权

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
  })
}

关注