vue实现表格过滤功能

本文实例为大家分享了vue实现表格过滤功能的具体代码，供大家参考，具体内容如下

效果：

组件代码： 

<template>
 <div>
 <input type="text" v-model="searchText">

 <ul>
 <li v-for="(book, index) in filterBooks" :key="index">
  序号 : {{index}}, 书名 ; {{book.name}}, 价格 : {{book.price}}
 </li>
 </ul>

 <div>
 <button @click="setOrderType(2)">价格升序</button>
 <button @click="setOrderType(1)">价格降序</button>
 <button @click="setOrderType(0)">原始顺序</button>
 </div>
 </div>
</template>

<script>


export default {
 name:"filter1",

 data () {
 return {
  searchText: '',
  orderType: 0, // 0:默认顺序, 1:价格降序, 2:价格升序
  books: [
  {name: 'Vue.js', price:50},
  {name: 'Javascript', price:30},
  {name: 'Css', price:40},
  {name: 'Html', price:60}
  ]
 }
 },
 computed: {
  filterBooks () {
  const {searchText, books, orderType} = this
  let filterArr = new Array();

  // 过滤数组 过滤name键
  filterArr = books.filter(p => p.name.indexOf(searchText) !== -1)

  // 排序
  if(orderType) {
   filterArr.sort(function (p1, p2) {
   if(orderType === 1) { // 降序
    return p2.price - p1.price;
   } else { // 升序
    return p1.price - p2.price;
   }
   })
  }

  return filterArr;
  }
 },
 methods: {
  setOrderType (orderType) {
  this.orderType = orderType
  }
 }
}
</script>

<style>

</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。