利用elementui的树组件设计一个好看的样式用来展示课程章节

当设计一个好看的样式来展示课程章节时，可以根据你的喜好和需求进行定制。以下是一个示例，你可以基于这个示例进行修改和美化：

<template>
  <div class="course-tree">
    <el-tree
      :data="chapters"
      :props="defaultProps"
      @node-click="handleNodeClick"
      node-key="id"
      default-expand-all
    >
      <template v-slot="{ node, data }">
        <span class="chapter-label">
          <i
            class="el-icon-folder"
            v-if="node.isLeaf === false"
          ></i>
          <i
            class="el-icon-document"
            v-else
          ></i>
          {{ node.label }}
        </span>
        <span class="chapter-actions">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click.stop="editChapter(data)"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            @click.stop="deleteChapter(data)"
          ></el-button>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<style scoped>
.course-tree {
  padding: 20px;
}

.chapter-label {
  display: flex;
  align-items: center;
}

.chapter-label i {
  margin-right: 5px;
}

.chapter-actions {
  margin-left: auto;
}

</style>

在上面的代码中，我们首先给树容器添加了一个自定义类名 "course-tree"，然后设置了容器的样式。接下来，我们使用 ElementUI 的树组件，并设置了相关的属性。在 `<template v-slot="{ node, data }">` 中，我们自定义了每个章节节点的展示样式，包括图标和标签。同时，我们还添加了章节的操作按钮，例如编辑和删除按钮。

你可以根据自己的喜好和项目需求进行样式的调整和定制，比如修改颜色、字体大小、图标等。

希望这个示例对你有所帮助！如果你有任何其他问题，请随时提问。