vue3，form表单如何为遍历生成的form-item设置ref属性以及滚动定位

前沿

在开发过程中，部分组件都是通过 v-for 动态渲染出来的，那么如何给这些组件动态的设置ref呢？

问题案例

  <div class="home">
      <div class="collection-object" v-for="(item, index) in ruleForm.list" :key="item.id || index"
         ref="formRefs">
         <div>内容代码.....</div>
    </div>
  </div>
  <script setup name="Home">
  const formRefs = ref();
  </script>

会发现，无法获取到ref对象，如果单个ref，是可以通过该方式，进行获取；

解决方案

  <div class="home">
      <div class="collection-object" v-for="(item, index) in ruleForm.list" :key="item.id || index"
         :ref="setFormItemRef(item.id)">
         <div>内容代码.....</div>
    </div>
  </div>
  <script setup name="Home">
	const formItemRefs = ref({});
	const setFormItemRef = (refName) => {
	    return (el) => {
	        if(el) formItemRefs.value[refName] = el;
	    }
	};
	//滚动定位
	const scrollToItem = (refName) => {
	    const element = formItemRefs.value[refName];
	    if (element) {
	        element.scrollIntoView({ behavior: 'smooth', block: "center", inline: "nearest" });
	    }
	}
  </script>