el‐list - daniel-qa/Vue GitHub Wiki

el-list

<template>
    <el-scrollbar style="height: 100vh; width: 400px;">
        <el-list>
            <el-list-item v-for="(item, index) in items" :key="index">

                <div style="display: flex; flex-direction:column; align-items: flex-start;height:100px;
                          background:#ffffff;
                          justify-content:center;
                          align-items:center;
                          padding: 0px;
                          border: 2px solid #4CAF50;
                          border-radius: 8px;
                          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                            ">

                    {{ item }}
                </div>
            </el-list-item>
        </el-list>
    </el-scrollbar>
</template>

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

    const items = ref([
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4',
        'Item 5',
    ]);
</script>
  • el-list 垂直排列
<el-list style="display: flex; flex-direction: column;">

<!-- 套用 Class -->
<el-list class="custom-list">   

.custom-list {
  display: flex;
  flex-direction: column; /* 确保子元素按列排列 */
}
  • 文字靠左對齊，按鍵靠右對齊

实现文字靠左对齐，按钮靠右对齐，可以使用 Flexbox 布局。

你可以在 el-list-item 上设置 display: flex，并使用 justify-content: space-between 来将文字和按钮分别放到两端。

display: flex; justify-content: space-between;

el-list-item 使用更緊湊的樣式

<el-list>
  <el-list-item v-for="(school, index) in schoolList" :key="index" style="display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; line-height: 1.5; height: auto;">
    <span>{{ school.name }}</span>
    <el-button type="primary" size="small" @click="addSchool(school)">加入</el-button>
  </el-list-item>
</el-list>
  • 關鍵樣式解釋
padding: 5px 10px;    /* 減少內邊距，讓每列的高度變得更緊湊。*/

line-height: 1.5;   /* 設置行高為 1.5，以控制文字的垂直間距。*/

height: auto;   /* 確保高度是根據內容自動調整，而不是被默認的高度限制。*/
  • 如果想讓所有 el-list-item 都使用更緊湊的樣式，可以在 style 中添加全局樣式：
<style scoped>
.el-list-item {
  padding: 5px 10px !important;
  line-height: 1.5 !important;
  height: auto !important;
}
</style>

這樣就不需要為每個 el-list-item 單獨設置樣式。

配合 el-scrollbar

<template>
  <el-scrollbar style="max-height: 300px;">
    <el-list>
      <el-list-item v-for="(item, index) in items" :key="index">
        {{ item }}
      </el-list-item>
    </el-list>
  </el-scrollbar>
</template>

<script setup>
const items = Array.from({ length: 50 }, (_, i) => `學校 ${i + 1}`);
</script>

比起原生滾動條，el-scrollbar 提供了更細緻且風格統一的滾動條。

支持事件如 scroll，可以在滾動時觸發回調函數。

⚠️ **GitHub.com Fallback** ⚠️