<template>
  <div class="container">
    <div class="item" v-for="i in 10" :ref="setRef">
      {{ i }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { ComponentPublicInstance, ref } from 'vue';
type myType = ComponentPublicInstance | Element | null;
const divs = ref<Array<HTMLDivElement>>([]);
var setRef = (el: myType) => {
  divs.value?.push(el as HTMLDivElement);
</script>
				
{state.remittanceList.length !== 0 && (
    <div class={[styles['order-index-body-top-detail'], 'padding-none',        'order-index-body-top-detail-el']}>
      <div class={styles['order-son']}>
           <el-collapse.
  <el-table :data="tableData" style="width: 1200px">
    <el-table-column
      v-for="tableItem in tableHeader"
      :fixed="tableItem.fixed"
      :prop="tableItem.prop"
      :label="tableItem.label"
      :width="tableItem.w.
				
酒店预订系统-vue后台 vue3 element-plus构建项目，使用组合式api是一种现代化开发方式，可以使项目的开发效率得到提高，代码的可读性和可维护性也会得到很大的提升。Vue3相比Vue2，在性能优化和服务端渲染方面有很大的改进，能够让项目更加流畅和高效。而Element-Plus则是一套基于Vue3的UI组件库，它集成了大量的常用组件和特色组件，可以大幅度地提高组件的开发效率和交互效果。
在具体实现方面，我们可以将组件分为小组件并采用组合式api的方式编写。这样可以实现组件的复用和配置化，大大提高了开发效率。同时，我们也可以在vue3中采用更加简洁和直观的方式来写模板和处理组件数据，代码可读性也会得到提高。我们还可以借助vue3的组件异步加载，实现页面的按需加载，加快页面的渲染速度。
总的来说，酒店预订系统-vue后台 vue3 element-plus构建项目，使用组合式api能够大大提高开发效率和代码质量。通过采用这种现代化开发方式，我们可以让开发变得更加高效、灵活和可控，从而更好地服务于客户的需求。