基于vue + element-ui 实现表头多重筛选+分页

基于vue + element-ui 实现表头多重筛选+分页

欢迎优化和补充

<template>
  <div>
    <div>
      <el-table
        :data="enterHouseData"
        style="width: 100%"
        ref="multipleTable"
        tooltip-effect="dark"
        @filter-change="filterTagTable"> //表头筛选函数
        <el-table-column
          prop="type"
          label="出库/入库"
          :filters="[{ text: '出库', value: '出库' }, { text: '入库', value: '入库' }]"
          :column-key=" 'aStatus' " // 获取筛选字段
          filter-placement="bottom-end"
          :formatter="ETformatRole"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="审核状态"
          :column-key=" 'bStatus' " //获取筛选字段
          :filters="[{ text: '未审核', value: '未审核' }, { text: '已审核', value: '已审核' },{ text: '未通过', value: '未通过' }]"
          filter-placement="bottom-end"
          :formatter="statusformatRole"
        ></el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="paging">
          <img src="../assets/left.png" alt class="arrow" @click="previousPage()" />
          <span class="curPage">
            <input type="text" v-model="page.pageNum" />
          </span>
          <img src="../assets/left.png" alt class="arrow right" @click="nextPage()" /> 到第
          <input type value="1" v-model="page.pageNum" /> 页
          <span class="sure" @click="pageSure()">确定</span> 共
          <span class="page-total">{{allPage}}</span>页
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Goodsenter",
  data() {
    return {
      //表头筛选
      filtersObj: {
        etStatus: "",
        auStatus: ""
      },
      // 分页
      page: {
        pageNum: 1,
        pageSize: 10
      },
      hasNext: true,
      allPage: "",
      //表头数据
      enterHouseData: [],
    };
  },
  methods: {
    //如果后端返回的状态是数字切换为中文
    statusformatRole(row, column) {
      return row.status == "0"
        ? "未审核"
        : row.status == "1"
        ? "未通过"
        : "已审核";
    },
    ETformatRole(row, column) {
      return row.type == "1" ? "入库" : row.type == "2" ? "出库" : "出库";
    },
    //筛选表头的函数
    filterTagTable(filters) {
      if (filters.aStatus) {
        this.filtersObj.etStatus = filters.aStatus[0];
      }
      if (filters.bStatus) {
        this.filtersObj.auStatus = filters.bStatus[0];
      }
      this.pages();
    },
    //如果后端需要更具状态筛选则需要重新转化为数字
    selET() {
      if (this.filtersObj.etStatus == "出库") {
        this.filtersObj.etStatus = 2;
      } else if (this.filtersObj.etStatus == "入库") {
        this.filtersObj.etStatus = 1;
      }
    },
    selStatus() {
      if (this.filtersObj.auStatus == "未审核") {
        this.filtersObj.auStatus = 0;
      } else if (this.filtersObj.auStatus == "已审核") {
        this.filtersObj.auStatus = 2;
      } else if (this.filtersObj.auStatus == "未通过") {
        this.filtersObj.auStatus = 1;
      }
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value || row[property].value === value;
    },
    //点击上一页
    previousPage() {
      if (this.page.pageNum == 1) {
        return;
      } else {
        this.page.pageNum--;
      }
      this.pages();
    },
    //点击下一页
    nextPage() {
      if (this.hasNext) {
        this.page.pageNum++;
      }
      this.pages();
    },
    //确认第几页
    pageSure() {
      this.pages();
    },
    pages() {
      this.selET();
      this.selStatus();
      this.$axios
        .get("后端接口", {
          params: {
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize,
            type: this.filtersObj.etStatus, //后端需要查询的状态字段
            status: this.filtersObj.auStatus //后端需要查询的状态字段
          }
        })
        .then(res => {
          this.enterHouseData = res.data.data.list;
          var sumPage = Math.ceil(res.data.data.total / res.data.data.pageSize);
          this.hasNext = sumPage > res.data.data.pageNum;
          this.allPage = sumPage;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.pages();
   
  }
};
</script>
<style >
</style>