element ui table 增加筛选的方法示例


Posted in Javascript onNovember 02, 2018

网上大部分都可以增加筛选功能,但没有找到下列这种情况。

若表头数据较多,而表头是自己通过v-for循环产生,这种情况怎么给虚拟dom添加筛选规则。

<el-table-column v-for="item in tableHead" :key="item.id" :prop="item.id" :label="item.label" :filters="item.filter" :filter-method="item.filter && filterHandler">

列表头是通过v-for循环遍历出来的数据

如何添加规则内容

首先,element提供了filters,filter-method两个属性,一个是写规则的内容,一个是写的方法。

this.tableHead = [
   {id: '1', label: xxx},
   {id: '2', label: xxx, filter: []},
   {id: '3', label: xxx, filter: []},
   {id: '4', label: xxx},
   {id: '5', label: xxx},
   {id: '6', label: xxx, filter: []}
  ]

只需要在要添加规则的上面加上filter这个key值。

filter里面的内容要按照element ui 上面的格式塞进去

:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"

所以只能用方法来找到相应的id然后再处理。

let filterList = this.tableHead.filter(i => i.id === '1')[0].filter

规则的内容是和列表内容有关系,而一般情况下列表的内容也是从后端数据拿到的。所以要对规则的内容进行处理。

this.tableData.forEach((item) => {
   filterList.push({
   text: item.xxx, value: item.yyy
  })
 })

这样操作肯定会有重复的text和value,所以需要去重。

去重方法:

uniqArrObject (arr) {
  let result = {}
  let finalResult = []
  for (let i = 0; i < arr.length; i++) {
   result[arr[i].text] = arr[i]
  }
  for (let key in result) {
   finalResult.push(result[key])
  }
  return finalResult
 },

得到最终的规则内容:

filterList = this.uniqArrObject(filterList)

规则方法

filterHandler (value, row, column) {
  const property = column['property']
  return row[property] === value || row[property].value === value
},

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

Javascript 相关文章推荐
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
详解webpack多页面配置记录
Jan 22 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
Vue请求JSON Server服务器数据的实现方法
Nov 02 #Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 #Javascript
如何使用vuex实现兄弟组件通信
Nov 02 #Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 #Javascript
vue头部导航动态点击处理方法
Nov 02 #Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 #Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 #Javascript
You might like
浅析PHP水印技术
2007/02/14 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
Node.js模块加载详解
2014/08/16 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python基础中所出现的异常报错总结
2016/11/19 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python交互环境下实现输入代码
2018/06/22 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
Python如何执行系统命令
2020/09/23 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
英文自荐信格式
2013/11/28 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
个人违纪检讨书
2014/09/15 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
大二学年个人总结
2015/03/03 职场文书
德生2P3收音机开箱评测
2022/04/30 无线电
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL