antdesign vue版 treeSelect组件通过调用接口获取的数据赋值给tree-data UI界面上不显示这数据

Z时代
2024-03-12
分类：IT

antdesign vue版 treeSelect组件通过调用接口获取的数据赋值给tree-data UI界面上不显示这数据，但是输入框跟tree-data对应的数据在输入框已经有显示了，就是下拉框没有数据显示，不知各位有没有知道原因的？

回答：

你先这样，注释掉调用接口传给你data。直接用demo数据。如果demo数据显示无误，那你就看后台传前台json数据格式对不对。参考：https://www.antdv.com/compone...

const treeData = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
  {
    value: '0-0-1',
    key: '0-0-1',
    scopedSlots: {
      // custom title
      title: 'title',
    },
   },
   {
    title: 'Child Node2',
    value: '0-0-2',
    key: '0-0-2',
  },
],
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
},
];

回答：

<a-tree-select
                v-model="bomModelForm.BOM_LIST"
                :getPopupContainer="
                        triggerNode => triggerNode.parentNode
                    "//绑定到输入框下
                dropdownMatchSelectWidth//与输入框同宽度
                :tree-data="bomDataList"//treedata数据 用onSearch回调返回
                tree-checkable//显示checkbox
             :filterTreeNode="filterBomTreeNode"//自定义的筛选方式
                @search="onSearch"//写自己的search方法
              ></a-tree-select>
filterBomTreeNode(inputValue, treeNode) {
      return true;//直接返回true 使用onsearch的方法回调的treedata
    },
onSearch(value) {
 //value是输入框里的值，传给后端接口返回搜索到的数据    },