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

目录
  • vue-treeselect显示unknown问题
    • 解决办法一
    • 解决办法二
  • vue-treeselect中的小tip

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue组件vue-treeselect箭头和叉图标变大问题及解决

    vue组件vue-treeselect箭头和叉图标变大问题及解决

    目录 vue-treeselect箭头和叉图标变大 解决方法 解决后的样子 插件vue-treeselect用法 首先需要安装 用法看代码注释 vue-treeselect箭头和叉图标变大 最近在项目开发过程中使用vue的treeselect组件遇到了图标变大的问题,附图: 其他页面也有应用到这个组件但没有出现这种情况,在我从正常页面跳转到这个页面的时候,不会出现问题,几个页面的样式代码并没有区别. 后经排查发现问题是因为没有引入treeselect的样式导致的,没有异常的页面是因为页面引入的子

  • VueTreeselect 参数options的数据转换-参数normalizer解析

    目录 VueTreeselect 参数options的数据转换-参数normalizer VueTreeselect 参数options的数据转换解析 VueTreeselect 参数options的数据转换-参数normalizer VueTreeselect 控件: <template>   <div>     <treeselect v-model="value" :normalizer="normalizer" placehol

  • 如何修改vue-treeSelect的高度

    目录 修改vue-treeSelect的高度 vue-treeselect的基本使用 1.vue-treeselect是一个树形的下拉菜单 2.引入组件和样式 3.使用 修改vue-treeSelect的高度 .vue-treeselect{ height: 28px; } .vue-treeselect .vue-treeselect__control{ height: 28px !important; } .vue-treeselect__placeholder{ line-height:

  • 关于下拉类型多选组件Vue-Treeselect(键名转换)

    关于下拉类型多选组件Vue-Treeselect(键名转换)

    目录 下拉类型多选组件Vue-Treeselect(键名转换) 支持的功能项 在一般项目中也可以使用 vue-treeselect下拉树 稍微注意点 下拉类型多选组件Vue-Treeselect(键名转换) 支持的功能项 1.支持嵌套选项的单选和多选 2.模糊匹配 3.异步搜索 4.延迟加载(仅在需要时加载深度选项的数据) 5.键盘支持(使用Arrow Up & Arrow Down键导航,使用键选择选项Enter等) 6.丰富的选项和高度可定制的 7.支持 多种浏览器 它支持在vue项目中通过

  • Vue动态构建混合数据Treeselect选择树及巨树问题的解决

    Vue动态构建混合数据Treeselect选择树及巨树问题的解决

    目录 一.后台构建两个表的数据选择查询功能 二.在VUE中引入Treeselect 三.使用Treeselect组件 四.构建初始的省级目录 五.构建动态生成的二.三.四级目录 六.最后效果 今天在项目中需要通过行政区域选择,然后选择该行政区域下面的景区,也就是要构建行政区划.景区两表数据表的树. 全国的行政区域到县已经3500多了,再加上景区会有几万个点,这棵选择树不论是在后台还是在前台构建都比较大,会影响系统性能,需要前后端结合,动态构建,使用时用懒加载,提升系统性能. 一.后台构建两个表的

  • element-ui+vue-treeselect下拉框的校验过程

    element-ui+vue-treeselect下拉框的校验过程

    目录 element-ui+vue-treeselect下拉框的校验(ivew也适用) vue-treeselect的插件使用 element-ui+vue-treeselect下拉框的校验(ivew也适用) 在项目开发中 使用了vue-treeselect的话,使用element-ui或者ivew自带的表单校验发现,trigger中blur和change均不生效,在选择了值之后验证依然存在 解决方法主要是使用vue-treeselect官网中api给出的事件中的input,在value改变后触

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

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

    目录 vue-treeselect显示unknown问题 解决办法一 解决办法二 vue-treeselect中的小tip vue-treeselect显示unknown问题 解决办法一 官方上面绑定的value是不能为空的,要写成null才不会出现 解决办法二 这个方法简单粗暴~ 直接修改去你这个node-modules包里面找到这个组件的源码,在它dist文件里面找到这个文件 搜索unknown,把它干掉,完美解决 vue-treeselect中的小tip 1.设置选中当前节点不默认选中父节

  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 <style type="text/css"> [v-cloak] { display: none; } </style> 第二步.在view上引用css模块 <div id="app" v-cloak> <h1>{{message}}</h1>

  • vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

    vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

    之前是采用npm或者yarn直接装包vue-contextmenujs的形式: npm install vue-contextmenujs -S || yarn add vue-contextmenujs 当右键点击记录时,完整展示应该是如下图所示: 结果,当点击靠前的记录时,顶部一部分记录被浏览器给遮挡了,如下图所示: 由于是使用的第三方开源组件,所以我直接将组件源码下载下来,然后修改组件源码,通过直接在源码中引入组件的形式调用.组件github仓库地址:https://github.com/

  • vue前台显示500和405错误的解决(springboot为后台)

    vue前台显示500和405错误的解决(springboot为后台)

    目录 vue前台显示500和405错误 vue常见报错原因收集 vue前台显示500和405错误 如图,500错误一般是后台接口有问题,要检查接口代码. 405问题,因为我写了后台接口并改了配置文件(后台为springboot)后没有重新启动后台,重启后台就好了. vue常见报错原因收集 1.throw er; // Unhandled ‘error’ event => 出现这种错误一般就是已经运行的另一个服务器使用了相同的端口,换一个端口就可以了.有些时候,webstrom里开了两个Termi

  • vue Treeselect 树形下拉框:获取选中节点的ids和lables操作

    API: https://vue-treeselect.js.org/#events 1.ids: 即value 1.lable: 需要用到方法:@select(node,instanceId) 和 @deselect(node,instanceId) <template> <treeselect ref="DRHA_EFaultModeTree" v-model="DRHA_EFaultModeTree_value" :multiple=&quo

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

  • vue渲染时闪烁{{}}的问题及解决方法

    v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的.  v-if与v-show区别: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,

  • Android使用百度地图出现闪退及定位时显示蓝屏问题的解决方法

    Android使用百度地图出现闪退及定位时显示蓝屏问题的解决方法

    使用百度地图出现闪退 一般情况下出现闪退是在AndroidManifest.xml文件中未在application标签中配置 <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="D9Lh8MrrLMUuXdWMU8tRLtDsta6PoaYN" /> 但是,有些同学会发现,所有配置都是按照官网或者教程上的步骤来配置依旧会出现闪退问题.此时,不要盲目直接去网上搜索使用百度地图出

  • vue :src 文件路径错误问题的解决方法

    首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.png),"./logo.png"是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方

随机推荐