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>

展示效果如下: 

Logo

前往低代码交流专区

更多推荐