vue实现表格过滤功能


Posted in Javascript onSeptember 27, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
小程序自定义日历效果
Dec 29 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
vue实现手机端省市区区域选择
Sep 27 #Javascript
使用layui的layer组件做弹出层的例子
Sep 27 #Javascript
vue选项卡切换登录方式小案例
Sep 27 #Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 #Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 #Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 #Javascript
vue实现倒计时获取验证码效果
Apr 17 #Javascript
You might like
php的控制语句
2006/10/09 PHP
php的hash算法介绍
2014/02/13 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
win与linux系统中python requests 安装
2016/12/04 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
乡镇办公室工作决心书
2014/03/11 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
三万活动总结
2014/04/28 职场文书
爱护花草树木的标语
2014/06/11 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python