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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
python创建线程示例
2014/05/06 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
小学教师的个人自我鉴定
2013/10/26 职场文书
汽车运用工程毕业生自荐信
2013/10/29 职场文书
运动会入场解说词
2014/02/07 职场文书
食品业务员岗位职责
2014/03/18 职场文书
三好生演讲稿
2014/09/12 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL