vuetreeselect懒加载树回显问题

问题描述

这两天开发一个配置页面，有一个树结构表单项，选用的vuetreeselect组件，数据量大采用懒加载形式

发现回显的时候，一旦刷新页面，选中的数据因为懒加载当前的树还没有加载这条数据，页面显示带有(unknown)

解决办法

首次想到通过进入页面是根据选中的id查询所关联的父亲和祖先组成的搜索树，treeselect可以缓存搜索结果，这选中的就展示没问题了，继续选择的时候就刷新根节点数据，结果发现组件不支持手动搜索，那这个就行不通了

上面的办法行不通也没想到其他的好办法，最后用了一个笨办法实现了这个效果，需要和后端配合， 选中树的时候把id和label组成list对象传给后端，回显的时候，通过树组件支持选中项展示自定义插槽，我们显示的时候根据显示id和存储的list对象做个映射就能正常显示了

<template>
 <treeselect>
    <div slot="value-label" slot-scope="{ node }">{{ getCustomLabel(node) }}</div>
  </treeselect>
</template>
<script>
export default {
    methods: {
        // 把正确的label展示出来
        getCustomLabel(node) {
            if (node.label.indeOf('(unknown)')) {
                // 前后端交互的id和label列表
                const list = [
                    {id: 111, label: '选项1'}，
                    {id: 222, label: '选项2'}，
                ]
                const item = list.find(v => v.id === node.id)
                return item? item.label: ''
            }
            return node.label
        }
    }
}
</script>