element的表格列过滤,实现自定义方法

247 阅读1分钟

首先了解一下表格列的筛选

<el-table-column prop="tag" label="标签" width="100" 
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" 
:filter-method="filterTag" filter-placement="bottom-end">
    <template scope="scope"> 
            <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" close-transition
                {{scope.row.tag}}
             </el-tag> 
    </template> 
</el-table-column>

这里是对当前的表格的每一行进行过滤,缺点就是要每一行都进行过滤,如果操作不当就会导致死循环,页面卡死,并且不能进行全局过滤,也就是只能分页的这一页,后面的分页数据不会过滤,导致切换分页就会数据错乱

全部数据的过滤方法

  1. @filter-change 要写在table根元素,也就是<el-table  @filter-change="filterChange" >

  2. 需要筛选的项,要写上  column-key="hosttype",这里是指定唯一的key值名

fliterChange(filters){
        // 这里拿到对应的列进行数据过滤
        const filterskey = filters.hosttype
        console.log(filterskey)
        if (filterskey.length>0) {
          this.blist = this.list.filter(data => {
            return Object.keys(data).some(key => {
              return data['hosttype'] ===filterskey[0]
            })
          })
          this.total = this.blist.length
          return this.blist
        }
        this.blist = this.list
        this.total = this.blist.length
        return this.list
      }