自定义 Table 搜索功能 + 降序 +升序

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Amy_cloud/article/details/84284569

如上图，实现表格简单的搜索和排序功能，
搜索： 利用 vue 的 computed 计算属性来实现；
代码如下：

export default {
      data() {
        return {
			headList:['序号','姓名','性别','年龄','得分'],
		  	tableData:[
				  {'num':1,'name':'lilo','sex':'女','age':18,'score':33},
				  {'num':2,'name':'abc','sex':'男','age':22,'score':13},
				  {'num':3,'name':'hoho','sex':'女','age':26,'score':83},
				  {'num':4,'name':'pplo','sex':'女','age':14,'score':53}
			],
			value:'',
        }
      },
	  computed:{
		 newData: function(){
			var that = this;
			var data = that.tableData.slice();
			var filterKey = that.value && that.value.toLowerCase();
			if( filterKey ){
				 data = data.filter(function(row) {
						return Object.keys(row).some(function(key) {
							return String(row[key]).toLowerCase().indexOf(filterKey) > -1
						})
					})
			}
			return data
		 }
	  },
      methods: {
		//升序  降序
		handUp(data){
			data.sort((a,b)=>{
                return a.score<b.score;
			});
			this.tableData = data;
		},
		handDown(data){
			data.sort((a,b)=>{
                return a.score>b.score;
			});
			this.tableData = data;
		},
	},
}

PS:
这里会用到js里面的 toLowerCase() 方法先将用户输入的字符串转换为小写；
再利用 filter() 方法过滤用户输入，再使用 some() 用于检测数组中的元素是否满足指定条件;
最后返回 搜索的信息。