VUE element-ui 表格筛选filter-method方法,适用于数组,嵌套对象

希望大家指正

针对这种情况,第一栏是新老校区都有的情况
在这里插入图片描述在这里插入图片描述
筛选的数据是这样的,classTimePosition是表格的一个prop绑定的属性

classTimePosition: [{
                            campus:'new',
                            timePosition:[{
                                time:'1',
                                weekD: '周三',
                                position:'bw221',
                            },{
                                time:'2',
                                weekD: '周一',
                                position:'bx211',
                            }],
                        },{
                            campus:'old',
                            timePosition:[{
                                time:'3',
                                weekD: '周五',
                                position:'bs227',
                            }],
                        }
                        ],
 //表头筛选
            filterHandler(value, row, column){  //筛选选项的value,一行row对象,column一列的属性值
                const property = column['property'];    // column['property']值为属性名·
                // console.log(JSON.stringify(column));
                
                //筛选数据中[{campus: '',..... }]这种类型数据
                if(Array.isArray(row[property])){   //行中该属性是数组
                    var  arr = false;
                    for(var i in row[property]){
                    //每次的arr为上一次和这一次结果的或,效果就是如果数据出现新老校区都有的情况,筛选到时候新老校区都会显示这条数据
                        arr = (row[property][i].campus === value)||arr;
                    }
                    return arr;
                }
			//
			else if(row[property] instanceof Object){//属性值是对象
                  
                    if(row[property].isInstituteRc!=undefined)
                        return row[property].isInstituteRc  === value;
                }
            else{ //普通属性值
                    return row[property] === value;
                }
            },
### 关于 `el-tree-transfer` 的筛选框回调函数 `el-tree-transfer` 是一个基于 VueElement-UI 的树形穿梭框组件,它提供了丰富的功能来处理树形数据的转移操作。虽然官方文档并未详细描述筛选框的具体回调函数用法,但从其设计逻辑可以推测出其实现方式。 #### 筛选框的功能概述 筛选框的主要作用是对左侧或右侧的树节点进行过滤显示。通过输入关键词,用户能够快速定位到目标节点。此过程通常涉及以下几个部分: 1. **监听输入事件**:当用户在筛选框中输入内容时触发。 2. **更新树节点状态**:根据输入的内容动态调整树节点的可见性。 3. **提供自定义行为**:允许开发者通过回调函数捕获用户的输入并执行额外的操作。 --- #### 示例代码实现 以下是关于如何使用筛选框回调函数的一个简单示例: ```javascript <template> <div> <!-- 左侧筛选--> <el-input v-model="leftFilterText" placeholder="请输入关键字" @input="handleLeftFilter"></el-input> <!-- 右侧筛选--> <el-input v-model="rightFilterText" placeholder="请输入关键字" @input="handleRightFilter"></el-input> <!-- 树形穿梭框 --> <el-tree-transfer :titles="['源列表', '目标列表']" :data="treeData" :default-checked-keys="[]" width="80%" mode="transfer" filterable :filter-method="customFilterMethod" /> </div> </template> <script> export default { data() { return { treeData: [ { id: 1, label: "节点一", children: [{ id: 4, label: "子节点四" }] }, { id: 2, label: "节点二" }, { id: 3, label: "节点三" } ], leftFilterText: "", rightFilterText: "" }; }, methods: { handleLeftFilter(value) { console.log("左筛选框输入:", value); this.customFilterMethod(value); // 调用自定义过滤方法 }, handleRightFilter(value) { console.log("右筛选框输入:", value); this.customFilterMethod(value); // 调用自定义过滤方法 }, customFilterMethod(query, item) { if (!query) return true; // 如果查询为空,则返回全部匹配 return item.label.indexOf(query) !== -1; } } }; </script> ``` --- #### 参数解析 上述代码中的关键点如下: 1. **绑定筛选框输入值** - 使用 `v-model` 将筛选框的输入值绑定至变量(如 `leftFilterText` 或 `rightFilterText`),以便实时获取用户输入[^1]。 2. **监听输入事件** - 利用 `@input` 监听筛选框的变化,并将其传递给对应的回调函数(如 `handleLeftFilter` 或 `handleRightFilter`)。这些回调函数可用于记录日志、通知其他模块或者进一步优化用户体验[^3]。 3. **自定义过滤方法** - 设置 `filter-method` 属性指向一个自定义的方法(如 `customFilterMethod`)。该方法接收两个参数:当前输入的关键字 (`query`) 和待检测的树节点对象 (`item`)。通过对 `label` 字段或其他字段进行模糊匹配,决定是否保留某个节点。 --- #### 注意事项 1. **确保已安装依赖项** 在项目中集成 `el-tree-transfer` 前,请先确认已成功引入 Element-UI 并完成必要的配置。可以通过 npm 安装插件及其相关资源[^2]。 2. **性能优化** 对大规模树结构进行筛选可能会带来一定的性能开销。因此,在实际开发过程中应考虑对深层嵌套的数据采取懒加载策略,减少一次性渲染的压力。 3. **默认行为覆盖** 若希望完全控制筛选逻辑而不依赖内置机制,则需仔细阅读 API 文档以明确哪些属性支持重写以及可能引发的影响。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值