vue+ele实现分页以及筛选

<template>
  <div class="list" ref="list" style="position: relative">
    <div ref="top" style="max-height: 100px; overflow: auto">
      <el-form size="mini" :inline="true">
        <el-form-item>
          <el-input
            style="width: 150px; margin-left: 10px; margin-right: 10px"
            class="searchInput"
            placeholder="请输入设备Id"
            v-model="formInline.deviceId"
            clearable
          ></el-input>
          <el-button type="primary" @click="searchItem">查询</el-button>
          <el-button type="primary" @click="resetInput">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :max-height="size.table + 'px'"
      :data="list"
      :stripe="true"
    >
      <el-table-column prop="deviceCode" label="设备编号" width="180"> </el-table-column>
      <el-table-column prop="deviceName" label="设备名称" width="180"> </el-table-column>
      <el-table-column prop="communityName" label="小区名称"> </el-table-column>
      <el-table-column prop="innerOrderName" label="垃圾类型"> </el-table-column>
      <el-table-column prop="createTime" label="巡检日期"> 
        <template slot-scope="scope">
          <span>{
    
    {
    
    scope.row.createTime | dateFmt("YYYY-MM-DD HH:mm:ss")}}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- ---------------------------分------页------------------- -->
    <div ref="page" class="Pagination">
      <el-pagination
        ref="pagination"
        background
        :current-page.sync="formInline.page"
        layout="prev, pager, next, jumper,total"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
        :total="Number(total)"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    
    
  components: {
    
    },
  name: "",
  data() {
    
    
    return {
    
    
      step: "content",
      formInline: {
    
    
        page: 1,
        limit: 10,
        deviceId: "",
      },
      total: 0,
      list: [],
      size: {
    
    
        table: 400,
      },
    };
  },
  props: {
    
    
    viewHeight: {
    
    
      type: Number,
    },
    viewWidth: {
    
    
      type: Number,
    },
  },
  watch: {
    
    
    // "$store.state.screenWidth"(i) {},
    // "$store.state.screenHeight"() {},
    viewHeight() {
    
    
      this.getSize();
    },
    viewWidth() {
    
    
      this.getSize();
    },
  },
  methods: {
    
    
    getSize() {
    
    
      this.$nextTick(() => {
    
    
        // 获取父有无视图高度
        console.log(this.viewHeight, this.$refs.list.offsetHeight);
        let hs = this.viewHeight || this.$refs.list.offsetHeight;
        let h = hs - this.$refs.top.offsetHeight - this.$refs.page.offsetHeight;
        this.$set(this.size, "table", h);
      });
    },
    //获取本页数据
    getList() {
    
    
      this.$http
        .request("menuListManage", this.formInline)
        .then((data) => {
    
    
          console.log(data);
          this.list = data.data.data;
          this.total = data.data.count;
        })
        .catch(() => {
    
    });
    },
    //当前页码发生改变
    handleCurrentChange(i) {
    
    
      this.$set(this.formInline, "page", i), this.getList();
    },
    //条件查询
    searchItem() {
    
    
      this.$set(this.formInline,"page",1)
      this.getList()
    },
    //输入框重置
    resetInput() {
    
    
      this.formInline.deviceId = "";
    },
  },
  mounted() {
    
    
    this.getList();
  },
};
</script>
<style></style>