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工具库代码
Mar 29 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
详解angular中的作用域及继承
May 31 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
Vue指令指令大全
Feb 09 Javascript
three.js显示中文字体与tween应用详析
Jan 04 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
jQuery.each()用法分享
2012/07/31 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Python中random模块用法实例分析
2015/05/19 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
出生医学证明样本
2014/01/17 职场文书
三项教育活动实施方案
2014/03/30 职场文书
《花木兰》教学反思
2014/04/09 职场文书
校园环保建议书
2014/05/14 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
校园运动会广播稿
2015/08/19 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书