vue可通过ref来获取当前dom,但是vue3有个问题,就是必须定义ref的变量名,才能使用
倘若有许多个ref,一个个去定义未免过于繁琐,还有就是若是dom是使用v-for循环出来的,那么ref也就不确定了,无法提前定义
解决方法:
这是使用v-for循环出来的dom,ref通过index下标来命名,
<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>
此时riskSpreadRefList里面放的就是所有ref
const riskSpreadRefList = ref<HTMLElement[]>([]);
const getRiskSpreadRef = (el, index) => {
if (el) {
riskSpreadRefList.value[index] = el;
}
};
使用:循环去取就行了,item就是通过ref拿到的dom元素。可以操作上面定义的变量或方法
riskSpreadRefList.value?.forEach((item: any) => {
console.log(item)
});
还有一种获取ref的方法,与上面略相似,记录一下,但是用push可能会造成ref还没渲染完得到null的情况,所以最好还是上面那样写
<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)
});