Vue2中如何定位v-for动态生成的嵌套子表格？

问题原因 #

在Vue2中，当ref属性放置在v-for循环内部时，Vue不会将其绑定为单个DOM元素，而是自动把所有生成的匹配元素收集为一个数组。你的代码中外层v-for生成了5个内层表格，tableChild这个ref对应的是包含这5个表格的数组，但你直接以单个DOM元素的方式访问它（比如调用children属性），自然会出现定位失败的问题——因为数组本身没有children属性。

正确定位方法 #

要访问内层表格，需要通过数组索引获取对应DOM元素，或遍历数组操作所有内层表格：

修改后的脚本代码 #

<script>
export default {
  mounted() {
    // 外层表格可直接获取单个DOM元素
    console.log("table1:", this.$refs.table1);

    // 内层表格是数组，需通过索引访问单个元素
    console.log("所有内层表格:", this.$refs.tableChild);
    console.log("第一个内层表格:", this.$refs.tableChild[0]);
    console.log("第一个内层表格的子元素:", this.$refs.tableChild[0].children);

    // 遍历所有内层表格进行操作
    this.$refs.tableChild.forEach((table, idx) => {
      console.log(`第${idx+1}个内层表格的子元素:`, table.children);
    });
  }
}
</script>

可选方案：动态绑定ref（按需使用） #

如果需要精准定位某一个内层表格，可以给ref动态绑定唯一标识：

<!-- 模板中动态绑定ref -->
<table :ref="`tableChild-${parentIndex}`">

之后通过this.$refs[tableChild-1]就能直接拿到对应索引的内层表格，但这种方式仅适合需要单独操作特定表格的场景，批量操作还是使用数组更高效。

内容的提问来源于stack exchange，提问作者neale cook