---

问题背景

在表单中动态增加的Tree控件中，注册一个 ref 引用，报错如下：

this.$refs[‘showRegionsTree’] is not a function

在调用Tree控件的 setCheckedKeys、getCheckedKeys，分别报错如下：

Cannot read property ‘setCheckedKeys’ of undefined"
Cannot read property ‘getCheckedKeys’ of undefined"

动态增加的Tree控件

表单中动态增加控件可参考文章，通过按钮增加Tree控件大同小异：

Element-UI 实现动态增加多个输入框并校验

动态增加的Tree控件如图：

先看实现核心代码吧！

创建el-tree控件数据

data() {return {// tree数据showRegions: {data: [],props: { children: 'children', label: 'name' },selectedIds: []}}
},created() {// 请求并填充数据loadRegionData().then(res => {this.showRegions.data = [{ id: 0, name: '展示地区', children: res }]})
},

动态增加的el-tree控件

<el-card class="box-card" shadow="never"><el-scrollbar style="height:300px; width: 300px;"><el-tree ref="showRegionsTree" :data="showRegions.data" :default-checked-keys="showRegions.selectedIds" :props="showRegions.props" accordion show-checkbox node-key="id" /></el-scrollbar>
</el-card>

编辑数据前需进行设置勾选状态

报错：

this.$refs[‘showRegionsTree’] is not a function

这个错误是因为你的dom元素还没有加载完，你就想使用 setCheckedKeys 设置目前勾选的节点。也就是你写的this.$refs.tree.setCheckedKeys(list); 这个里面的 tree 还没有加载出来。

解决方案：

this.$nextTick(() => {// 执行
});

（1）Vue.nextTick([callback, context])

用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

（2）vm.$nextTick([callback])

用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

报错：

Cannot read property ‘setCheckedKeys’ of undefined"

这个错误是因为调用不到 setCheckedKeys 方法

可以看到以下代码，获取ref引用调用 getCheckedKeys 时，并不是 this.$refs['showRegionsTree']，而是 this.$refs['showRegionsTree'][0]

const ids = regions.split('|').filter(item => item.length > 0).map(item => parseInt(item))
if (this.$refs['showRegionsTree']) {this.$nextTick(() => {this.$refs['showRegionsTree'][0].setCheckedKeys(ids)})
} else {this.showRegions.selectedIds = ids
}

新增/编辑请求前需转换格式

报错：

Cannot read property ‘getCheckedKeys’ of undefined"

这个错误是因为调用不到 getCheckedKeys 方法

次处同样如此，在获取ref引用调用 getCheckedKeys 时，并不是 this.$refs['showRegionsTree']，而是 this.$refs['showRegionsTree'][0]

if (this.$refs['showRegionsTree']) {const ids = this.$refs['showRegionsTree'][0].getCheckedKeys()this.form.content[i].val = ids ? `|${ids.join('|')}|` : ''
}