Vue-treeselect如何正确绑定值和实现回显功能？

本文共计1207个文字，预计阅读时间需要5分钟。

目录 + Vue Treeselect 绑定与回显常见问题 + 这里以表单中的例子展示 + 最重要的一点就是 + Vue3 Treeselect 绑定数据有bug问题 + Vue Treeselect 绑定、回显常见问题 + 最近Vue Treeselect 使用比较多的对比，分享一波 + 可以说

目录

• vue-treeselect绑值、回显常见问题
• 这里以表单里的举例
• 最主要的几点就是
• vue3-treeselect绑定数据有bug问题

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” 是输入框回显的值

<el-form-item label="上级部门:"> <TreeSelect :value="form.astdeptId" :options="zoneCodeOptions" clearable no-options-text="暂无可用选项" :append-to-body="true" :normalizer="tenantIdnormalizer" open-direction="bottom" placeholder="请选择父级节点" @select="node => tenantIdHandleSelect(node)" > <div slot="option-label" slot-scope="{ node }" style="white-space: nowrap; font-size: 14px"> {{ node.raw.name ? node.raw.name : '' }} </div> <div slot="value-label" slot-scope="{ node }">{{ node.raw.name ? node.raw.name : '' }}</div> </TreeSelect> </el-form-item>

打印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', }

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

<template>   <div class="tree-container">     <el-select       ref="singleTree"       v-model="singleSelectTreeVal"       class="vab-tree-select"       clearable       :placeholder="placeholder"       popper-class="select-tree-popper"       value-key="id"       @clear="selectTreeClearHandle('single')"     >       <el-option :value="singleSelectTreeKey">         <el-tree           id="singleSelectTree"           ref="singleSelectTree"           :current-node-key="singleSelectTreeKey"           :data="selectTreeData"           :default-expanded-keys="selectTreeDefaultSelectedKeys"           :highlight-current="true"           :node-key="selectTreeDefaultProps.id"           :props="selectTreeDefaultProps"           @node-click="selectTreeNodeClick"         >           <template #defalut="{ node }" class="vab-custom-tree-node">             <span class="vab-tree-item">{{ node.label }}</span>           </template>         </el-tree>       </el-option>     </el-select>   </div> </template>

<script>   import { onBeforeMount, onMounted, reactive, toRefs, watch } from 'vue'   export default {     name: 'VabSingleSelectTree',     props: {       //这里是绑定参数       modelValue: {         type: Number,         default: undefined,       },       //这里是数组       options: {         type: Array,         default: undefined,       },       //placeholder       placeholder: {         type: String,         default: '',       },       //这里是转换方法       normalizer: {         type: Object,         default: undefined,       },     },     emits: ['update:modelValue'],     // { emit }     setup(props, { emit }) {       //$emit('update:modelValue', $event.target.value)       const state = reactive({         singleSelectTree: null,         singleTree: null,         singleSelectTreeKey: props.modelValue,         singleSelectTreeVal: null,         selectTreeData: props.options,         selectTreeDefaultSelectedKeys: [],         selectTreeDefaultProps: props.normalizer,       })       onBeforeMount(() => {         defaultNormalizer()       })       //首次加载       onMounted(() => {         initialize()       })       watch(props, (newValue) => {         //这里props里的值不会自动赋值给state中常量，只有第一次过来的时候才会赋值之后需要手动赋值         state.singleSelectTreeKey = newValue.modelValue         state.selectTreeData = newValue.options         initialize()       })       //防止不写Normalizer报错       const defaultNormalizer = () => {         if (!state.selectTreeDefaultProps) {           state.selectTreeDefaultProps = {             id: 'id',             label: 'label',             children: 'children',           }         }       }       //初始化       const initialize = () => {         if (state.singleSelectTreeKey != null) {           state['singleSelectTree'].setCurrentKey(state.singleSelectTreeKey) // 设置默认选中           let node = state['singleSelectTree'].getNode(             state.singleSelectTreeKey           )           state.singleSelectTreeVal =             node.data[state.selectTreeDefaultProps['label']]           state.singleSelectTreeKey =             node.data[state.selectTreeDefaultProps['id']]         } else {           selectTreeClearHandle()         }       }       // 清除单选树选中       const selectTreeClearHandle = () => {         state.selectTreeDefaultSelectedKeys = []         clearSelected()         emit('update:modelValue', null)         state.singleSelectTreeVal = ''         state.singleSelectTreeKey = null         state['singleSelectTree'].setCurrentKey(null) // 设置默认选中       }       const clearSelected = () => {         const allNode = document.querySelectorAll(           '#singleSelectTree .el-tree-node'         )         allNode.forEach((element) => element.classList.remove('is-current'))       }       const selectTreeNodeClick = (data) => {         state.singleSelectTreeVal = data[state.selectTreeDefaultProps['label']]         state.singleSelectTreeKey = data[state.selectTreeDefaultProps['id']]         emit('update:modelValue', state.singleSelectTreeKey)         state['singleTree'].blur()         //data         // if (data.rank >= this.selectLevel) {         //         // }       }       return {         ...toRefs(state),         selectTreeClearHandle,         selectTreeNodeClick,         defaultNormalizer,         initialize,       }     },   } </script> <style scoped></style>

/* .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;           }         }       }

有需要的各位随意取用吧

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