antdesign(vue)中 a-tree-select组件用filterTreeNode设置筛选结果不正确

antdesign中的文档里,让我们这么筛选,那么代码里就要这么写

<a-tree-select
                v-model="queryParam.businessTypeIdList"
                multiple
                :filterTreeNode="filterTreeOption"
                show-search
                treeDefaultExpandAll
              >
                <a-tree-select-node
                  v-for="i in businessTypesList"
                  :value="i.id"
                  :title="i.name"
                  :key="i.name"
                >
                  <a-tree-select-node
                    v-for="item in i.children"
                    :value="item.id"
                    :title="item.name"
                    :key="item.name"
                  >
                    <a-tree-select-node
                      v-for="test in item.children"
                      :value="test.id"
                      :title="test.name"
                      :key="test.name"
                    >
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select-node>
              </a-tree-select>

其中,用于筛选树结点的方法我们写成这样,筛选节点的title有没有包含我们输入的字段

  /* 树节点筛选 */
    filterTreeOption (input, treeNode) {
      return treeNode.data.props.title.includes(input)
    },

但是筛选出来,我们发现只会展示一级节点,即筛选出的结果是包含了输入字段的一级节点,如果输入的字段是二级节点的title,也只会展示包含此二级节点的一级节点

那么为了我们的筛选有针对性,我们在二级节点也添加同样的筛选条件即可:

<a-tree-select
                v-model="queryParam.businessTypeIdList"
                multiple
                :filterTreeNode="filterTreeOption"
                show-search
                treeDefaultExpandAll
              >
                <a-tree-select-node
                  v-for="i in businessTypesList"
                  :value="i.id"
                  :title="i.name"
                  :key="i.name"
                >
                  <a-tree-select-node
                    v-for="item in i.children"
                    :filterTreeNode="filterTreeOption"
                    :value="item.id"
                    :title="item.name"
                    :key="item.name"
                  >
                    <a-tree-select-node
                      v-for="test in item.children"
                      :value="test.id"
                      :title="test.name"
                      :key="test.name"
                    >
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select-node>
              </a-tree-select>

展示效果如下: 

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值