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 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
node网页分段渲染详解
Sep 05 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
微信小程序实现登录注册功能
Dec 29 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
我的论坛源代码(四)
2006/10/09 PHP
php Undefined index的问题
2009/06/01 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
php依赖注入知识点详解
2019/09/23 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python实现微信小程序自动回复
2018/09/10 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
售前工程师职业生涯规划
2014/03/02 职场文书
解除财产保全担保书
2014/05/20 职场文书
党员服务承诺书
2014/05/28 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
建党伟业观后感
2015/06/01 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
Python安装使用Scrapy框架
2022/04/12 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android