示例如下:文章来源地址https://www.toymoban.com/news/detail-656566.html
<template v-for="item in selectList">
<el-select v-model="item.value" :ref="el => setRef(el, item)">
<el-option
v-for="v in item.options"
:key="v.value"
:label="v.label"
:value="v.value"
/>
</el-select>
</template>
const state = reactive({
selectList:[
{ key:'aaa', value:'', options:[{ label:'测试', value:'1' }]},
{ key:'bbb', value:'', options:[{ label:'测试', value:'1' }]}
]
})
const { selectList } = toRefs(state)
const selectRef = ref({}) as any;
//动态设置ref
const setRef= (el, item) => {
if (el) {
selectRef.value[item.key] = el
}
}
console.log(selectRef.value['aaa'])
// 打印出来的值为 动态绑定的选择框aaa的ref属性
文章来源:https://www.toymoban.com/news/detail-656566.html
到了这里,关于vue3如何批量设置动态ref的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!