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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
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
VFP与其他应用程序的集成
2006/10/09 PHP
?生?D片??C字串
2006/12/06 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
超清晰的document对象详解
2007/02/27 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
拖动时防止选中
2017/02/03 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python编写屏幕截图程序方法
2015/02/18 Python
Python如何获取系统iops示例代码
2016/09/06 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
python通过链接抓取网站详解
2019/11/20 Python
python绘制随机网络图形示例
2019/11/21 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
校园摄影活动策划方案
2014/02/05 职场文书
餐饮投资计划书
2014/04/25 职场文书
英文推荐信格式范文
2014/05/09 职场文书
2014年终个人总结报告
2015/03/09 职场文书