element ui table 增加筛选的方法示例

2018-11-02 51 徐金俊

网上大部分都可以增加筛选功能,但没有找到下列这种情况。

若表头数据较多,而表头是自己通过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 onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 44
jquery获取所有选中的checkbox实现代码
May 26 40
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 34
Node.js对MongoDB数据库实现模糊查询的方法
May 03 47
微信小程序实现导航栏选项卡效果
Jun 19 52
JsChart组件使用详解
Mar 04 34
webstrom Debug 调试vue项目的方法步骤
Jul 17 50
手机访问当前页面