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之小练习代码
Oct 12 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JavaScript中的闭包
2016/02/24 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python3 操作符重载方法示例
2017/11/23 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
西安当代医院管理研究院笔试题
2015/12/11 面试题
文明餐桌行动实施方案
2014/02/19 职场文书
爱护草坪标语
2014/06/24 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
车间统计员岗位职责
2015/04/14 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript