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 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
两个数组去重的JS代码
Dec 04 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
基于js实现数组相邻元素上移下移
May 19 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
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
php自动加载代码实例详解
2021/02/26 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python识别html主要文本框过程解析
2020/02/18 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
远程调用的原理
2014/07/05 面试题
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
军训的自我鉴定
2013/12/10 职场文书
党员自我对照检查材料
2014/08/19 职场文书
大班下学期个人总结
2015/02/13 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
奖励申请报告范文
2015/05/15 职场文书
党小组意见范文
2015/06/08 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
python实现层次聚类的方法
2021/11/01 Python
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis