vue前端分页模糊搜索

<template>

  <div>      

            <el-input

              class="noborder"

              @focus="focus"

              @blur="blur"

              @input="search"

              :placeholder="$t('rela.attach.tip')"

              v-model="searchkey"

              clearable

              style="width: 220px"

            >

            </el-input>

    <div class="filesList">

      <file-item

        v-for="(item) in showList"

        :key="item.attachid"

      />

    </div>

    <!-- 超过xx条之后显示分页 -->

    <div class="pagination" v-if="totaldata > 10">

      <el-pagination

        class="page"

        @size-change="sizeChange"

        @current-change="currentpageChange"

        :current-page="currentpage"

        :page-sizes="[10, 20, 50, 100]"

        :page-size="rowsPerPage"

        layout="sizes,total,->,prev, pager, next, jumper"

        :total="totaldata"

        background

      />

    </div>

  </div>

</template>

<script>

export default {

  components: {

  },

  props:{

  },

  data() {

    return {

      fileList: [],

      currentfileList: [],

      searchkey: "",

      currentpage: 1, //第几页

      rowsPerPage: 10, //每页多少条

      filterText:'',//搜索框搜索关键字

    };

  },

   created(){

  },

  computed: {

    totaldata() {

      return this.fileList&&this.fileList.length?this.fileList.length:0;

    },

  currentTableData() {

      if (this.totaldata > 0) {

        return this.fileList.slice(

          this.rowsPerPage * (this.currentpage - 1),

          this.rowsPerPage * this.currentpage

        );

      } else {

        return [];

      }

    },

  showList(){

      if (this.filterText.length>0) {

        var arr = this.currentTableData.filter((item)=>{

           return item.filename.indexOf(this.filterText) != -1;

        });

        return arr

      }

      return this.currentTableData

    },

  },

  watch:{

    totaldata(){

      let page = Math.ceil(this.totaldata / this.rowsPerPage);

      if (page == 0) {

        this.currentpage = 1;

      } else if (page < this.currentpage) {

        this.currentpage = page;

      }

    }

  },

  methods: {

    search(){

      // 搜索框回车事件

      this.currentpage=1;

      this.filterText=this.searchkey;

    },

        // 每页条数改变时

    sizeChange(val) {

      this.rowsPerPage = val;

    },

    // 当前第几页改变时

    currentpageChange(val) {

      this.currentpage = val;

    },

 

  },

};

</script>