Element-UI 在表单通过按钮动态增加Tree树形控件

---

问题背景

在表单中动态增加的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('|')}|` : ''
}