emmm... Because the building owner's big four dog s are ready to be set up, there is no backstage interface and the required functions should be simulated as much as possible, so the input box search function of the pure front end can be realized by using the vue hand code. --(Input Search Function of Next Blog Writing with Page Flipping Function)

At first, I searched the iview component for a table table table table component with filtering function, as shown in the following figure:

But I didn't find it long before I was happy! Incredibly! In paging mode, only the data of the current page can be filtered, that is to say, the function provided by the government is limited to form filtering without paging.

So, I wondered if I could encapsulate a function to input the search data into the input box. Then I started to stumble around doing data simulation, and then I posted all the code based on vue (that is, I suddenly remembered that sometimes when I want to debug the examples of my predecessors, I will report errors, and it is very difficult to debug them as soon as possible without complete code, so I posted demo to help small partners in need).

<template>
  <div>
    <div class="input-wrap">
      <Input
        search
        v-model="searchVal"
        placeholder="Please enter the query content..."
        @input="autosearch"
        style="width: auto"
      />
      <i-button type="dashed" class="reset" @click="resetDate">Reset</i-button>
    </div>
    <br />
    <Table border :columns="columns" :data="showList"></Table>
  </div>
</template>

These are the views in the template:

<script>
export default {
  data() {
    return {
      searchVal: "",
      showList: [],
      newList: [],
      columns: [
        {
          title: "Registration date",
          key: "date"
        },
        {
          title: "Full name",
          key: "name"
        },
        {
          title: "Student ID",
          key: "studentId"
        },
        {
          title: "mailbox",
          key: "email"
        }
      ],
      mockList: [
        {
          date: "2019-09-26",
          name: "Li Xiaomeng",
          studentId: 2016127206,
          email: "839170766@qq.com"
        },
        {
          date: "2018-09-26",
          name: "Li Da Meng",
          studentId: 2016127206,
          email: "839170766@qq.com"
        },
        {
          date: "2017-09-26",
          name: "Li ugly Meng",
          studentId: 2016127206,
          email: "839170766@qq.com"
        },
        {
          date: "2015-09-26",
          name: "Lee Mei Meng",
          studentId: 2016127206,
          email: "839170766@qq.com"
        },
        {
          date: "2019-09-26",
          name: "Lee Mei Meng",
          studentId: 2016127207,
          email: "839170766@qq.com"
        },
        {
          date: "2019-09-26",
          name: "Lee Mei Meng",
          studentId: 2016127208,
          email: "839170766@qq.com"
        },
        {
          date: "2019-09-26",
          name: "Si Meng Li",
          studentId: 2016127206,
          email: "aaa@163.com"
        },
        {
          date: "2019-09-26",
          name: "Li Si Meng",
          studentId: 2016127206,
          email: "xxx@189.com"
        }
      ]
    };
  },
  mounted() {
    this.showList = this.mockList; //mockList is used to simulate the data returned from the background and assign it to the array displayed on the page.
  },
  methods: {
    autosearch() {
      //Filter data when the user has input keywords
      if (this.searchVal !== "") {
        //Two statements can be used to filter only one condition:
        // this.newList = this.mockList.filter( item => item.name.indexOf(this.searchVal) !== -1);
        // this.showList = this.newList;

        // Use the array filter method to return each object in the array that contains the search content to the newList store
        this.newList = this.mockList.filter(
          item =>
            item.email.indexOf(this.searchVal) !== -1 ||
            item.date.indexOf(this.searchVal) !== -1 ||
            item.name.indexOf(this.searchVal) !== -1 ||
            // Because the indexOf method returns the index value of the character in the string, and the data type of studentId is number.
            //So the toString() method is used to convert the symbol in the object to a string and then the indexOf method is used.
            item.studentId.toString().indexOf(this.searchVal) !== -1
        );
        // When the newList data exists, execute the following statement to assign the filtered array to the array that should be displayed
        if (this.newList) {
          this.showList = this.newList;
        }
      }
    },
    // After clicking the Reset button, empty the input box and render the initial data.
    resetDate() {
      this.searchVal = "";
      this.showList = this.mockList;
    }
  }
};
</script>

The effect is as follows. Basic inclusion character filtering can be accomplished:


In fact, the key code can be condensed into one sentence:
this.mockList.filter( item => item.xxx.indexOf(this.searchVal) !== -1)

Don't underestimate this short code, which combines the array filtering method (Array.filter(), the arrow function of es6 (xx = > xxxx), the string search method (indexOf), so the students who are weak in foundation just see the code may be a little confused, do not know why this sentence can be written to filter out the data, the network. The top component framework is a basket, but if you only use the framework to take other people's ready-made code, then I think the ability is very difficult to improve. You need to know that the building needs one floor one floor, one floor, one floor, under the circumstances of abundant time, suggest that students lay a good foundation for javascript, in order to know the needs of the case more easily completed business logic design. .

There will be more pits on the way to knock code, but as long as we take pains to do it, we believe that we can all get what we want, grow slowly, and encourage with you! (/> </)~~