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获取GridView中行数据的两种方法 分享
Jul 13 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
简单实现js上传文件功能
Aug 21 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
three.js如何实现3D动态文字效果
Mar 03 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
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
非常好的js代码
2006/06/27 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
Python文件与文件夹常见基本操作总结
2016/09/19 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python selenium循环登陆网站的实现
2019/11/04 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
成考报名单位证明范本
2014/01/16 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
个人授权委托书范本
2014/04/03 职场文书
供货协议书
2014/04/22 职场文书
环境卫生倡议书
2014/08/29 职场文书
社区综治工作汇报
2014/10/27 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
Python实现拼音转换
2021/06/07 Python
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js