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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Vue Cli与BootStrap结合实现表格分页功能，包括了Vue Cli与BootStrap结合实现表格分页功能的使用技巧和注意事项，需要的朋友参考一下 1、首先需要在vue-cli项目中配置bootstrap,jquery 2、 然后新建vue文件,如index.vue，index.vue内容如下： 3、配置路由即可运行实现。 总结 以上所述是小编给大家介绍的Vue Cli与B
-
本文向大家介绍angular过滤器实现排序功能，包括了angular过滤器实现排序功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了angular过滤器排序的具体代码，供大家参考，具体内容如下 首先定义一个json文件： 然后写HTML文件： angular： 在这种运用到的过滤器有filter 、orderBy 这样就完成了一个简单的排序，希望能帮到大家！ 以上就是本文的全部
-
本文向大家介绍Vue实现自带的过滤器实例，包括了Vue实现自带的过滤器实例的使用技巧和注意事项，需要的朋友参考一下 一 过滤器写法 二 Vue自带的过滤器:capitalize 功能:首字母大写 上面代码输出:Abc 三 Vue自带的过滤器:uppercase 功能:全部大写 上面代码输出:ABC 四 Vue自带的过滤器:uppercase 功能:全部小写 上面代码输出:abc 五 Vue自带
-
本文向大家介绍vue实现日历表格（element-ui），包括了vue实现日历表格（element-ui）的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现日历表格的具体代码，供大家参考，具体内容如下 效果如图： html：后面的日期是循环出来的 这里注意一下:key="index + item" ，之前我的key设置的只等于index，然后到了后面数据删选的时候就各种出错，
-
本文向大家介绍vue+element UI实现树形表格，包括了vue+element UI实现树形表格的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue+element UI实现树形表格的具体代码，供大家参考，具体内容如下 一、在component文件夹下新建如下treeTable文件夹，里面有2个文件： eval.js:将数据转换成树形数据 index.vue:树形表格组件 二
-
本文向大家介绍vue+vue-validator 表单验证功能的实现代码，包括了vue+vue-validator 表单验证功能的实现代码的使用技巧和注意事项，需要的朋友参考一下 官方文档：http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址：https://github.com/vuejs/vue-validator 下
-
本文向大家介绍JS实现HTML表格排序功能，包括了JS实现HTML表格排序功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现HTML表格排序功能，供大家参考，具体内容如下 HTML代码： JavaScirpt代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
1. 前言 本小节我们将学习如何使用过滤器。包括如何注册过滤器、过滤器的使用、过滤器的串联、过滤器的传参。过滤器的使用非常简单，同学们只需要多写几个例子就可以完全掌握。 2. 慕课解释 Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。 — 官方定义 过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。过