jeecgboot-vue3中使用v-for渲染多个JVxeTable时如何动态绑定ref并通过$refs获取实例

在JeecgBoot Vue3项目中，当你需要使用`v-for`循环渲染多个`JVxeTable`组件并且动态地为每个表单绑定独立的`ref`属性，你可以这样做：

首先，在Vue组件模板中，给每个`JVxeTable`组件设置一个独特的`ref`名称，比如根据索引或者数据属性：

<template>
  <div v-for="(item, index) in items" :key="index">
    <JVxeTable ref="tableRef{{ index }}" :options="item.tableOptions"></JVxeTable>
  </div>
</template>

这里我们使用了`ref="tableRef{{ index }}"`，`{{ index }}`会被替换为当前循环的索引。

然后，在你的Vue组件中，你可以通过数组的方式来访问这些表单实例：

<script setup>
import { onMounted } from 'vue';

const items = ... // 假设这是你的表格配置数据

onMounted(() => {
  const tableInstances = []; // 存储所有表格的引用

  items.forEach((item, index) => {
    tableInstances[index] = $refs[`tableRef${index}`]; // 获取并存储对应的ref实例
  });

  // 现在你可以按索引来操作每个表格实例，例如调用方法或获取状态
  tableInstances[0].doSomething();
});
</script>

这样，每当`items`数组变化时（如果需要动态添加、删除表格），只需更新这个数组即可自动关联到新的` JVxeTable`实例。