html 表格过滤功能,vue实现表格过滤功能

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

效果：

组件代码：

• 序号 : {{index}}, 书名 ; {{book.name}}, 价格 : {{book.price}}

价格升序

价格降序

原始顺序

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

}

}

}

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