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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
vuex实现简易计数器
Oct 27 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
python列表与元组详解实例
2013/11/01 Python
Python反射用法实例简析
2017/12/22 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
详解python中的线程与线程池
2019/05/10 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
北承题目(C++)
2012/05/16 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
保护地球的宣传语
2015/07/13 职场文书