vue在mounted中无法获取$refs绑定的dom元素

分析问题、解决问题

根据vue中的钩子函数来说，mounted是渲染完成之后再执行的，这时候dom元素是加载完成了的。根据$refs去获得绑定的元素，如果元素已经是加载完成的话，那绝对是能够获取到的。所以出现这种情况，只有一种可能：你的$refs所在的标签并未被渲染。

这时候就需要检查你的渲染条件是使用了v-if还是v-show，v-if只有当条件成立才去渲染dom元素，所以在条件不成立时，该元素并未被渲染。而且，当条件成立，渲染完成之后，若所选择的条件不成立，该dom元素还会被销毁。
v-show会由始到终都加载该dom元素，只是不可见（可以理解为display=none）。

根据需求去选择你所需要条件渲染方式。

记录自己踩过的一个坑：

首先我在表格数据加载中使用了v-if作为条件渲染，当有数据时渲染数据，没有数据时显示No Data。可能有人问，这个要条件渲染？el-table不是自带的吗？我不想显示表头好吧。表格中也开启了多选框功能。

<div v-if="haveData">
    <el-table ref="tableData" @selection-change="haveSelectionChange" :data="tableData">
        <el-table-column type="selection"></el-table-column>
        ....
    </el-table>
</div>
<div v-else>
    No Data
</div>

问题复现：当我一开始条件成立，渲染出数据的时候，我点击了多选框，这时候，this.$refs.table.selection里面是有数据的，当我表格绑定的数据发生变化时，this.$refs.table.selection会自动置空，多选框恢复未选中状态，除非你自己又调用了toggleAllSelection方法。然而神奇的一幕出现了，当条件成立表格渲染成功后，点击多选框，触发一次条件不成立，再触发条件成立时，多选框恢复未选中状态，但是this.$refs.table.selection里面是有数据，保存的是刚才点击多选的数据。

导致这个问题出现的原因，我尝试去理解，或许这有点超出我的能力范畴了。我知道一定是dom渲染出了某些问题，不过具体原因有待研究。解决方案很简单，只要把v-if改为v-show即可

标签：vue,渲染,refs,dom,条件,元素,选框
来源： https://blog.csdn.net/interestANd/article/details/122105647