(标签-前端|关键词-树形控件)

Question

你好，有个问题想请教一下。
原生html引用element ui,页面样式都可以，但是this.$refs为空，导致一些组件的获取值没法用。
这是我的代码截图，我用的是【Tree 树形控件】，点击提交按钮，获取已选中的值，但是返回为空，获取不到，

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在使用Element UI的el-tree组件时遇到了问题，this.$refs在mounted钩子函数中是空的。这是因为Vue的 $refs 是在元素被渲染到DOM后才填充的，所以在 mounted 钩子里可能还没有被填充完成。解决这个问题的一种方法是在事件触发后获取 el-tree 的值，例如点击提交按钮之后。

首先，确保你已经在Vue实例中正确地定义了$refs，像这样：

<el-tree ref="tree" ...>

然后，在你的提交方法中，你需要等待DOM更新后再尝试获取选中的节点。可以使用Vue的 nextTick 方法来确保在DOM更新后执行回调函数：

submit: function () {
  this.$nextTick(() => {
    // 获取选中的节点
    const selectedNodes = this.$refs.tree.store._getAllNodes().filter(node => node.checked);
    
    // 将选中的节点ID转换为数组
    const chose_new = selectedNodes.map(node => node.data.id);

    // 将结果设置到chose_new并发送请求
    this.chose_new = chose_new;
    console.log('Selected nodes:', chose_new);
    // 这里可以调用你的发送请求的方法，比如：this.sendRequest();
  });
},

记得将sendRequest()替换为你实际的发送请求的函数名称。这段代码会在点击提交按钮后获取选中的树节点，并将其ID保存到chose_new数组中。

如果你还需要将这些值传递给隐藏输入框，可以在获取选中节点后将其添加到input的value属性中：

document.getElementById('ids').value = chose_new.join(',');

完整的Vue实例代码示例：

new Vue({
  el: '#app',
  data: function() {
    return {
      data: [], // 所有的床位数据
      chose_data: [], // 返回已选中的床位
      defaultProps: { children: 'childlist', label: 'label' },
      ids: '',
      chose_new: [], // 要提交选中的床位
    };
  },
  mounted() {
    console.log(this.$refs); // 这里可能会打印出空对象，因为此时DOM还未完全渲染完成
  },
  created() {
    this.ids = inputVal;
    this.getaddress_hospital();
  },
  methods: {
    getaddress_hospital: function() {...}, // 获取位置的方法

    submit: function() {
      this.$nextTick(() => {
        const selectedNodes = this.$refs.tree.store._getAllNodes().filter(node => node.checked);
        const chose_new = selectedNodes.map(node => node.data.id);
        this.chose_new = chose_new;
        console.log('Selected nodes:', chose_new);
        document.getElementById('ids').value = chose_new.join(',');
        // 这里可以调用你的发送请求的方法，比如：this.sendRequest();
      });
    },
  },
});

这样应该就可以正常获取到已选中的树节点并将其显示在隐藏输入框中了。