vue-treeselect显示unknown的问题及解决

 更新时间:2022年07月26日 11:09:35   作者:s--k--y  
这篇文章主要介绍了vue-treeselect显示unknown的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue-treeselect显示unknown问题

解决办法一

官方上面绑定的value是不能为空的,要写成null才不会出现

解决办法二

这个方法简单粗暴~

直接修改去你这个node-modules包里面找到这个组件的源码,在它dist文件里面找到这个文件

搜索unknown,把它干掉,完美解决

vue-treeselect中的小tip

1.设置选中当前节点不默认选中父节点和子节点:

  • flat: true

参考资料:https://vue-treeselect.js.org/#flat-mode-and-sort-values

2.选中了分支节点及其所有后代

则vue-treeselect会将它们组合到值数组中的单个项目中,可以通过 valueConsistsOf 来更改:

  • ALL: 选中的所有节点都将包含在 value 数组中
  • BRANCH_PRIORITY(默认): 如果选中了分支节点,则其所有后代将被排除在 value 数组之外
  • LEAF_PRIORITY: 如果选中了分支节点,则此节点本身及其分支后代将从value 阵列中排除,但其叶后代将包括在内
  • ALL_WITH_INDETERMINATE: 选中的任何节点将包括在 value 数组中,另外还有不确定的节点

参考资料:https://vue-treeselect.js.org/#prevent-value-combining

3.需要禁用父节点,但是子节点是可选的,需要使用:

:flat="true",必须和多选配合使用 :multiple="true" 但是需要单选怎么办:

绑定 input 事件,然后在事件中处理:

inputTreeValue(nodes) {
          if (Array.isArray(nodes)) {
            const len = nodes.length;
            const lastNode = nodes[len - 1];
            this.value = lastNode ? [lastNode] : [];
          } else {
            this.value = null;
          }
        }

参考资料:https://github.com/riophae/vue-treeselect/issues/145 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3页面query参数变化并重新加载页面数据方式

    vue3页面query参数变化并重新加载页面数据方式

    在Web开发中,页面间的跳转及数据刷新是常见问题,通过使用$router.push和$router.replace方法,可以控制页面跳转的行为,具体操作时,若发现页面ID变更后数据未刷新,可通过给router-view标签添加key值解决,若使用keep-alive
    2024-10-10
  • Vue 3.0 v-for中的Ref数组用法小结

    Vue 3.0 v-for中的Ref数组用法小结

    在 Vue 2 中,在 v-for 里使用的 ref attribute会用ref 数组填充相应的 $refs property,本文给大家介绍Vue 3.0 v-for中的Ref数组的相关知识,感兴趣的朋友一起看看吧
    2023-12-12
  • vue中前端代理跨域问题实例总结

    vue中前端代理跨域问题实例总结

    前后端分离进行项目开发,跨域问题不可避免,下面这篇文章主要给大家介绍了关于vue中前端代理跨域问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • vue mint-ui学习笔记之picker的使用

    vue mint-ui学习笔记之picker的使用

    本篇文章主要介绍了vue mint-ui学习笔记之picker的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Vue插件之滑动验证码用法详解

    Vue插件之滑动验证码用法详解

    这篇文章主要介绍了Vue插件之滑动验证码用法,结合实例形式详细分析了Vue滑动验证码插件相关使用方法与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • vue中el-cascader三级联动懒加载回显问题解决

    vue中el-cascader三级联动懒加载回显问题解决

    本文主要介绍了vue中el-cascader三级联动懒加载回显问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • Vue3-新特性defineOptions和defineModel示例详解

    Vue3-新特性defineOptions和defineModel示例详解

    在Vue3.3中新引入了defineOptions宏主要是用来定义Option API的选项,可以用defineOptions定义任意的选项,props、emits、expose、slots除外,本文给大家介绍Vue3-新特性defineOptions和defineModel,感兴趣的朋友一起看看吧
    2023-11-11
  • 3分钟了解vue数据劫持的原理实现

    3分钟了解vue数据劫持的原理实现

    这篇文章主要介绍了3分钟了解vue数据劫持的原理实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • VueJS 组件参数名命名与组件属性转化问题

    VueJS 组件参数名命名与组件属性转化问题

    这篇文章主要介绍了VueJS 组件参数名命名与组件属性转化问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue 监听窗口变化对页面部分元素重新渲染操作

    vue 监听窗口变化对页面部分元素重新渲染操作

    这篇文章主要介绍了vue 监听窗口变化对页面部分元素重新渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论