<template>
  <el-scrollbar class="scrollbar">
    <el-list>
      <el-list-item 
        v-for="(school, index) in showData" 
        :key="index" 
        class="list-item">
        <span>{{ school.name }}</span>
        <el-button type="primary" size="small" @click="addSchool(school)">加入</el-button>
      </el-list-item>
    </el-list>
  </el-scrollbar>
</template>

<script setup>
import { ref } from 'vue';

const showData = ref([
  { name: 'School A' },
  { name: 'School B' },
  { name: 'School C' },
]);

function addSchool(school) {
  console.log('加入学校:', school.name);
}
</script>

<style scoped>
.scrollbar {
  height: 300px; /* 设置滚动条高度 */
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  line-height: 1.5;
  height: auto;
}
</style>