Vue+ElementUI前端实现分页和模糊查询

1.变量的定义：

  tableData：该变量用来向表格中展示数据。

  tempDate：该变量用来保存在后台请求过来的所有数据，便于模糊查询时进行匹配。

  data() {
    return {
      tableData: [],
      tempDate: [],
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的行数
      totals: 0,
      name: "",
      movie: {
        id: "",
        name: "",
        director: "",
        screenwriter: "",
        performer: "",
        form: "",
        country: "",
        language: "",
        releaseDate: "",
        filmlength: "",
        info: "",
        type: "",
        logo: "",
        video: "",
      },
      select: "",
    };

 2.computed和watch方法

  watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来。当Vue视图中的数据变化时, 关联的函数会被执行。

  watch可以监听data里面值的变化。当input输入框中的值发生变化的时候，与其关联的函数便会执行。

computed: {
    // 计算当前表格中的数据，用于分页。
    data() {
      //slice方法通过索引位置获取并返回一个新的子数组。
      //用法：arrayObj.slice(start,end)，其中，arrayObj 为原数组，
      //start设定新数组的起始位置，end设定新数组的结束位置。
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  watch: {
    select: function () {
      // 如果输入框的值为空的话，便会执行
      if (this.select === "") {
        this.tableData = this.tempData; // tempData中存储的是后台请求来的所有信息
      } else {
        // 如果不为空的话
        this.tableData = [];
        for (let item of this.tempData) { // 对tempData中的所有信息进行遍历
          if (
            item.name.includes(this.select) ||
            item.author.includes(this.select)
          ) {
            // 如果tempData中的某一条目中的某个属性包含输入框中的内容时，
            // 就将这个条目放入tableData中，因为tableData中保存的是用来向表格中展示的数据
            this.tableData.push(item);
          }
        }
      }
    },
  },  

3.向后台请求数据的方法，写在methods里面

queryAllMovies() {
    this.tempData = [];
    this.tableData = [];
    this.$http.post("***/****(自己的后台接口)", {}).then((resp) => {
      this.tableData = resp.data;
      this.tempData = resp.data;
    });
  },

4.表格table

  该表格绑定的是data，该绑定的数据为computed中的data，是经过计算分页之后的数据。

注：展示的为项目的部分代码。

最后实现的效果展示：