antdesign(vue)中 a-tree-select组件用filterTreeNode设置筛选结果不正确
antdesign中的文档里,让我们这么筛选,那么代码里就要这么写<a-tree-selectv-model="queryParam.businessTypeIdList"multiple:filterTreeNode="filterTreeOption"show-searchtreeDefaultExpandAll..
·
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>
展示效果如下:
更多推荐
已为社区贡献15条内容
所有评论(0)