vue-treeselect 直接赋值后，后面跟(unknown)的解决办法

vue-treeselect 直接赋值后，后面跟(unknown)的解决办法

项目中场景：

项目中有这样的一个弹框，这里面的表单元素都是动态生成的，我自己封装的有一个表单组件。

输入框和普通的 select 下拉框用的都是 elementui 框架里面的东西，只有下拉树结构用的是 vue-treeselect 插件。

新增页面没问题，下拉框的数据都是 select 获取焦点的时候才请求接口，然后渲染数据。但是编辑页面是从接口获取业务数据（业务数据是指带有值的表单元素）直接赋值的，elementui 的输入框和 select 下拉框都没问题，但是 vue-treeselect 直接赋值（中文值）后面就会跟  (unknown) 。

上网搜文章，很多文章说的都是页面初始加载的时候，下拉框里面只有 (unknown) ，只要把双向绑定数据改为 null 就可以了。与我碰到的问题不一样，我这个是编辑页面，直接赋值之后，后面跟 (unknown) 的情况。

参考 ​​ treeSelect赋值后，后面跟(unknown)​​ 这篇文章之后，了解到 vue-treeselect 是必须有下拉框的数据，直接赋值的时候，必须赋值 ID ，然后插件通过 ID 去匹配下拉框里面的数据，显示出 ID 所对应的中文内容。

解决方案：

先上代码截图：

表单组件中，下拉树结构的数据绑定的是 item.options ，所以编辑界面的时候，直接生成一个 options 选项，里面只有一项数据，就是要绑定的数据，然后赋值的时候，直接赋值 guid 即可。

注意，这里不能直接赋值 name 了，也就是不能直接赋值中文，不然还是会出现 (unknown) 的情况，必须赋值 guid ，插件自己会通过 guid 去下拉选项中寻找 guid 对应的中文 name。

vue-treeselect 官网的下拉选项用的是 id 和 label ，我这里根据项目需求用的是 guid 和 name，因为我用 normalizer 转化了一下，如下图：

后语：

1、如果是先获取下拉树结构的数据，然后再通过 id 赋值就没事，不会出现后面跟 unknown 的情况。

2、我目前的组件中获取下拉树结构的数据是当下拉框获取焦点的时候才去请求接口数据，因此通过“修改”按钮打开的弹框，表单要回显值，而且下拉树结构也没有获取焦点事件去请求下拉数据，所以下拉树结构没有数据，这时候直接赋值会出现 unknown 的情况，解决办法就是只有手动添加一条下拉树结构的数据。

------------  完结  ------------

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。