获取element ui Tree组件 调用过滤方法后的数据

最近有个需求是需要获取过滤后的 Tree组件数据, 看了一下element的文档,发现没有这个api,然后看了一下tree组件的数据,也没找到过滤后的数据,最后发现,element是通过Nodetree控制一个visible的变量来控制节点显示不显示的,如图
在这里插入图片描述

得到这个参数也算不错了,接下来就只需要写个递归遍历出来就行

    /**
     * @description: 获取过滤后的数据
     */
    getFilterData() {
   
      if (this.filterText) {
   
        const rootData = this.$refs.tree.root
        if (rootData.visible) {
   
          const childNodesStr = CircularJSON.stringify(rootData.childNodes)
          const childNodes = CircularJSON.parse(childNodesStr)
          this.filterData = this.recursionNodes(childNodes)
          console.log(this.filterData)
        } else {
   
          console.log('暂无数据')
        }
      }
    },

    /**
     * @description: 递归遍历数据
     * @param {array} nodes
     */
    recursionNodes(childNodes) {
   
      const nodes = childNodes
      const result = []
      for (const item of nodes) {
   
        if (item.visible) {
   
          result.push(item.data)
        }
        if (item.childNodes && item.childNodes
  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值