您现在的位置是：网站首页> 编程资料编程资料

关于vue-treeselect绑值、回显等常见问题的总结_vue.js_

2023-05-24 412人已围观

简介 关于vue-treeselect绑值、回显等常见问题的总结_vue.js_

vue-treeselect绑值、回显常见问题

最近vue-treeselect使用的比较多，分享一波

可以用在表单里，也可以用在可编辑的表格内

这里以表单里的举例

在main.js中引入

import ElTreeSelect from ‘el-tree-select' import Treeselect from ‘@riophae/vue-treeselect' import ‘@riophae/vue-treeselect/dist/vue-treeselect.css' Vue.use(ElTreeSelect) Vue.component(‘TreeSelect', Treeselect)

最主要的几点就是

1、绑值:value=“form.astdeptId”，主要绑的就是id或者code，通过id或code找到对应的label回显

2、options是数据源，正常调接口获取就行了

3、append-to-body="true"这个最好加上，可能会遇到下拉的弹窗打不开或者只有一点点高的情况

4、normalizer就是把我们自己的后端返的数据格式按树插件需要的格式转换

5、select点击事件里赋值

6、插槽slot=“option-label” 是下拉框的值

7、插槽slot=“value-label” 是输入框回显的值

 {{ node.raw.name ? node.raw.name : '' }} 
{{ node.raw.name ? node.raw.name : '' }}

打印node，拿对应的id，label和children

 tenantIdnormalizer(node) {          if (node.children && !node.children.length) {         delete node.children       }       return {         id: node.astdeptId,         label: node.name,         children: node.children,       }     },

赋值给 this.form.astdeptId

    tenantIdHandleSelect(node) {       this.form.astdeptId = node.astdeptId       this.form.name = node.name     },

vue3-treeselect绑定数据有bug问题

问题，Vue3-treeSelect，在第一次绑定值的时候没有问题，但是第二次开始无法绑定，知道各位有没有什么好的解决方法，我比较菜搞不太懂。

所以，我重写了个简单的，没那么多功能的就只有v-model，options，placeholder，normalizer4个参数，下面把代码贴出来，需要注意的是，placeholder，normalizer这俩是非必须项，如果不需要可以不写，

placeholder不写，默认是空，normalizer不写默认是

{ id: ‘id', label: ‘label', children: ‘children', }

不过大佬们看看代码估计也就懂了

/* .vab-hey-message */     .vab-hey-message {       @mixin vab-hey-message {         min-width: 246px;         padding: 15px;         background-color: $base-color-white;         border-color: $base-color-white;         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);         .el-message__content {           padding-right: $base-padding;           color: #34495e;         }         .el-icon-close {           color: #34495e;           &:hover {             opacity: 0.8;           }         }       }

有需要的各位随意取用吧 

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

您可能感兴趣的文章:

上一篇：JS 中实现一个串型异步函数队列_javascript技巧_

下一篇：vue利用sync语法糖实现modal弹框的项目实践_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网