vue-模糊搜索

<template>
  <div class="search">
    <el-input placeText="请输入详细地址/门牌号/" v-model="search" @input="submitFun" ref="searchInput"></el-input>
    <el-table
      :data="searchData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      style="width:100%"
      max-height="450">
      <el-table-column fixed prop="id" label="编号" width="100"></el-table-column>
      <el-table-column prop="gname" label="商品名称" width="220"></el-table-column>
      <el-table-column prop="gnumber" label="货号" width="120"></el-table-column>
      <el-table-column prop="price" label="价格" width="120"></el-table-column>
      <el-table-column prop="is_onsale" label="上架" width="120"></el-table-column>
      <el-table-column prop="is_onsale" label="精品" width="120"></el-table-column>
      <el-table-column prop="is_onsale" label="新品" width="120"></el-table-column>
      <el-table-column prop="is_onsale" label="热销" width="120"></el-table-column>
      <el-table-column prop="is_onsale" label="热销" width="120"></el-table-column>
      <el-table-column prop="popular" label="热销" width="120"></el-table-column>
      <el-table-column prop="popular" label="热销" width="120"></el-table-column>
      <el-table-column prop="popular" label="人气" width="120"></el-table-column>
      <el-table-column prop="popular" label="库存" width="120"></el-table-column>
      <el-table-column prop="sale_volume" label="销量" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, items)"
            type="text"
            size="small"
          >查看</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, items)"
            type="text"
            size="small"
          >编辑</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, items)"
            type="text"
            size="small"
            style="margin:0px"
          >复制</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index, items)"
            type="text"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" style="margin-right:20px">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="searchData.length"
        ></el-pagination>
      </div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      search: "",
      searchData: "",
      items: [],
      currentPage: 1,
      pagesize: 5
    };
  },
  created() {
    this.inintData();
  },
  methods: {
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
    inintData() {
      this.axios.get("/goodsmanagement").then(res => {
        this.lists = res.data;
        this.searchData = this.lists;
      });
    },
    submitFun() {
      let search = this.search;
      this.searchData = this.lists.filter(function(list) {
        let searchField = {
          id: list.id,
          gname: list.gname,
          price: list.price
        };
        return Object.keys(searchField).some(function(key) {
          return (
            String(list[key])
              .toLowerCase()
              .indexOf(search) > -1
          );
        });
      });
    }
  }
};
</script>