音源列表显示不全？三种方法让你轻松解决

.music-management { display: flex; padding: 20px; }

.music-left { width: 20%; height: 100%; // 或者设置具体的高度值，确保容器足够高 border-radius: 15px; margin-right: 15px; }

.music-title { height: 60px; background: #4e9bff; color: #fff; font-size: 20px; line-height: 60px; padding-left: 30px; margin-bottom: 10px; }

.music-content { padding-bottom: 72px; }

.music-list { height: 50px; line-height: 50px; padding-left: 15px; background: #e3d2c3; /* 设置文本超出部分隐藏 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

&:hover { background-color: #598dca !important; color: #fff;

.svg-icon {
  color: #fff !important;
}

}

&.active { background-color: #598dca !important; color: #fff;

.svg-icon {
  color: #fff !important;
}

} }

要让音源列表完全显示，可以通过以下几种方式进行调整：

调整容器高度：将音源列表容器的高度 height 设置为足够高的数值，以容纳所有的音源列表项。

.music-left {
  height: 100%; // 或者设置具体的高度值，确保容器足够高
}

使用滚动条：将音源列表容器包裹在一个具有固定高度的滚动容器中，当音源列表超出容器高度时，显示滚动条。

<template>
  <div class='music-management'>
    <el-card class='music-left'>
      <div>
        <div class='music-title'>音源列表</div>
        <div class='music-content' style='max-height: 100%; overflow-y: auto;'>
          <!-- 音源列表项 -->
        </div>
      </div>
    </el-card>
  </div>
</template>

调整音源列表项高度：如果音源列表项的高度过高，也会导致无法完全显示。可以尝试减小音源列表项的高度，或者调整容器高度。

.music-list {
  height: 30px; // 调整为适当的高度
}

通过上述方法的组合调整，可以确保音源列表完全显示。