vue3-treeselect Property "$creat

问题背景

当我们从Vue2升级到Vu3的时候，对于@riophae/vue-treeselect ，我们也相应升级到 vue3-treeselect ，代码基本上不需要做过多修改。

但这里会有一个问题是，它会报这样的warning：[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance.

image.png

原因

我们再回到vue3-treeselect 这个仓库，我们发现这个仓库已经被归档了。
发现有人提了类似的issue
https://github.com/megafetis/vue3-treeselect/issues/6
https://github.com/megafetis/vue3-treeselect/issues/8
已经没人解决了。

解决之道

对于使用 element-plus 的同学来说，直接升级采用 el-tree-select 这个组件就行了。
我自己的一个修改示例如下：

image.png
这里唯一要改的是将 options 传参改成 data 这个传参

这里还有一个问题是，el-tree-select 的data树长这样：

image.png

也就是需要 label 和 value 这两个属性。

我这里为了偷懒，是将原来的 machineryTypeOptions 每个item扩展了 label和value，采用递归函数，如下

export function optionIterator(item) {
    item.label = item.machineryTypeName
    item.value = item.machineryTypeId
    if (item.children && item.children.length > 0) {
        item.children.forEach(optionIterator)
    }
}