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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
js实现表格筛选功能
Jan 18 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
JS前端轻量fabric.js系列物体基类
Aug 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
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
javascript history对象详解
2017/02/09 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
简单上手Python中装饰器的使用
2015/07/12 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python模块导入的细节详解
2018/12/10 Python
flask session组件的使用示例
2018/12/25 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
德国家具折扣店:POCO
2020/02/28 全球购物
企业宗旨标语
2014/06/10 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
企业党员个人自我评价
2014/09/20 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
爱晚亭导游词
2015/02/09 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android