vue3循环设置ref并获取的解决方案

<div
 class="chart"
  v-for="(item, index) in riskSpreadItem"
  :key="item.title"
>
  <Pie
    :id="`riskSpread${index}`"
    :ref="el => getRiskSpreadRef(el, index)"
    :title="item.title"
    :data="item.data"
    emptyText="暂无风险"
  />
</div>

const riskSpreadRefList = ref<HTMLElement[]>([]);
const getRiskSpreadRef = (el, index) => {
  if (el) {
    riskSpreadRefList.value[index] = el; 
  }
};

riskSpreadRefList.value?.forEach((item: any) => {
    console.log(item)
});

<div class="chart">
  <Pie
    :id="`risk${index}`"
    :ref="getRiskRef"
    :data="item.data"
    @clickPie="queryRiskList"
  />
</div>

let riskRefList = ref<HTMLElement[]>([]);
const getRiskRef = (el) => {
  if (el) {
    riskRefList.value.push(el);
  }
};

riskRefList .value?.forEach((item: any) => {
    console.log(item)
});

<template>
    <div  v-for="(item,index) in list" :ref="setItemRef">
      {{item}}
    </div>
    <el-button @click="getRefData">获取</el-button>
</template>

<script lang="ts" setup>
    import {ref,reactive,onMounted} from 'vue'
    const refList = ref([]); //定义ref数组
    const list = reactive([
        "第一行数据",
        "第二行数据",
        "第三行数据",
        "第四行数据",
    ])
    //赋值ref
    const setItemRef = el => { 
        if (el) {
            refList.value.push(el);
        }
    }

	//获取ref并执行接下来操作
    const getRefData = ()=>{
        for(let i =0; i < refList.value.length; i++){
            console.log(refList.value[i]); // refList.value[i].xxx   执行todo
        }
    }
 </script>