解决element-ui中的table标头的筛选功能(多数据-数组中存放对象)

这篇博客介绍了如何在Element-UI的表格组件中实现动态的列头筛选功能,特别是针对包含对象数据的数组。作者通过创建额外的数组来存储筛选选项,实现了对表格数据的过滤,并提供了具体的代码示例,包括`filterFlowno`函数用于匹配筛选条件。在`filterList`方法中,遍历后端返回的数据,动态填充筛选列表。
摘要由CSDN通过智能技术生成

解决element-ui中的table标头的筛选功能(多数据-数组中存放对象)

需求介绍:需要将表格中所有的数据渲染到标头,并进行筛选。所有的数据都是通过后端请求回来的。

效果图在这里插入图片描述
代码

 <el-table class="content"
    ref="filterTable"
    :data="$store.state.tableData "
    :default-sort = "{prop: 'dtime', order: 'descending'}"
    highlight-current-row
    @row-click="pitchOn"
    style="width: 100%; ">
        <el-table-column
          prop="flowno"
          label="交易流水"
          :filters="this.tableListFlowno"
          :filter-method="filterFlowno"
          filter-placement="bottom-end"
          sortable
          >
    </el-table-column>
 data: () => {
   // 过滤
    return {
      tableListFlowno:[],   //交易流水
      }
  },
  // 筛选
      filterFlowno (value, row) {
        return row.flowno === value
        },
 methods:{
   //公共方法
    filterPublic(arr,list,tableList){
          if(!arr.includes(tableList)){
            list.push({
                  'text':tableList,
                  'value':tableList,
              })
                arr.push(tableList)
             }       
    },
    // 请求所有交易流水
    filterList(){
       this.tableListFlowno=[]
     				 let arr1 = []
      				 for(let i = 0;i <res.data.errMsg.length;i++){      
                        this.filterPublic(arr1,this.tableListFlowno,res.data.errMsg[i].flowno)
                  	}
   }          

因为过滤的是数组中的对象,没有比较。所以另建一个空数组,用来比较里面是否已经存在参数

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值