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 keycode总结
Feb 04 Javascript
js闭包的用途详解
Nov 09 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
python中字符串前面加r的作用
2015/06/04 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
用python绘制樱花树
2020/10/09 Python
C有"按引用传递"吗
2016/09/06 面试题
介绍一下Ruby的特点
2013/01/20 面试题
《在家里》教后反思
2014/03/01 职场文书
我的画教学反思
2014/04/28 职场文书
外贸业务员求职信
2014/06/16 职场文书
本科生自荐信
2014/06/18 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
幽灵公主观后感
2015/06/09 职场文书
培根随笔读书笔记
2015/07/01 职场文书
Golang Web 框架Iris安装部署
2022/08/14 Python