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 相关文章推荐
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
JS实现随机抽取三人
Nov 06 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
nuxt引入组件和公共样式的操作
Nov 05 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
大师制作的中短波矿石收音机
2020/04/02 无线电
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
PHP_MySQL教程-第一天
2007/03/18 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
javascript正则表达式总结
2016/02/29 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
Python字符转换
2008/09/06 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Python正则表达式学习小例子
2020/03/03 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
公司中层干部的自我评价分享
2014/03/01 职场文书
总经理任命书
2014/03/29 职场文书
公司口号大全
2014/06/11 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
初中学校对照检查材料
2014/08/19 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
大学生党员个人总结
2015/02/13 职场文书
导游词之长城八达岭
2019/09/24 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
分享一些Java的常用工具
2021/06/11 Java/Android
MySQL数据库之存储过程 procedure
2022/06/16 MySQL