a-tree-select搜索值默认为value的问题解决方法。

最新推荐文章于 2024-09-10 15:14:41 发布

三个人工作室

最新推荐文章于 2024-09-10 15:14:41 发布

阅读量5.2k

点赞数 5

分类专栏： vue

本文链接：https://blog.csdn.net/wwppp987/article/details/109326583

版权

vue 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

本文介绍了AntDesign Vue组件库中a-tree-select组件的一个常见问题：默认使用value属性进行搜索，导致用户无法通过正常输入查找选项。文章提供了解决方案，即通过设置tree-node-filter-prop属性为'title'来实现按显示文本搜索。

摘要由CSDN通过智能技术生成

antdesignvue当中，a-tree-select默认使用了value进行搜索
我们会发现，a-tree-select搜索时候搜的是value，由于传入值一般都是id类型，用户不可能去搜索id，导致发生此问题。

默认：

title：显示值
value：搜索值（不能重复）、提交时候的传输值。
key：区分值（不能重复）

示例：【传入的json串示例】

const treeData = [
    {
      title: '满意度',
      value: '0-0',
      key: '0-0',
      disabled: true,
      children: [
        {
          title: "工作满意度",
          value: '0-0-1',
          key: '0-0-1',

        },
        {
          title: '生活满意度',
          value: '0-0-1',
          key: '0-0-2',
          // disabled: true,
        },
      ],
    },

解决方法：

在标签中加入：tree-node-filter-prop="title"
示例：

 <a-tree-select
                        v-model="form.tags"
                        style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        allow-clear
                        multiple
                        :tree-data="tagsData"
                        placeholder="请选择"
                        tree-default-expand-all
                        tree-node-filter-prop="title"
                      >