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 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
jQuery表单验证之密码确认
May 22 jQuery
利用vscode调试编译后的js代码详解
May 14 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
JavaScript实现移动端拖动元素
Nov 24 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 utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python何时应该使用Lambda函数
2019/07/02 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
《母鸡》教学反思
2014/02/25 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
这样写python注释让代码更加的优雅
2021/06/02 Python