vue实现表格过滤功能

本文实例为大家分享了某视频剪辑软件实现表格过滤功能的具体代码，供大家参考，具体内容如下

效果：

组件代码：

filterBooks' :key='index '中模板差异输入类型=' text ' v-model=' search text ' ul Li v-for='(图书，索引)序号： {{index}}，书名；{{book.name}}，价格： {{book.price}} /li /ul div按钮@click='setOrderType(2)'价格升序/button button @ click=' setOrderType(1)'价格降序/button button @ click=' setOrderType(0)'原始顺序/button/div/div/模板脚本导出默认值{ 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 3: { FilterBooks(){ const { search text，books，orderType }=这让filterArr/。过滤数组过滤名字键过滤器arr=书籍。过滤器(p=p .名称。indexof(搜索文本)！==-1) //排序if(orderType) { filterArr.sort(函数(p1，p2) { if(orderType===1) { //降序返回p2。普莱斯-P1。价格；} else { //升序返回P1。价格-p2。价格；} }) }返回filterArr} }，方法： { setOrderType(订单类型){ this。订单类型=订单类型} } }/脚本样式/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。