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 相关文章推荐
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
vue实现简单loading进度条
Jun 06 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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图片加中文水印实现代码分享
2012/10/31 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
php时区转换转换函数
2014/01/07 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
js实现图片轮播效果
2015/12/19 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
简单了解django orm中介模型
2019/07/30 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
django 实现简单的插入视频
2020/04/07 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
自我评价范文分享
2014/01/04 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
数学国培研修感言
2014/02/13 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
团日活动总结书
2014/05/08 职场文书
责任心演讲稿
2014/05/14 职场文书
车辆挂靠协议书
2016/03/23 职场文书