vue3 & element-plus 美化el-tree

在Vue 3和Element Plus中，您可以通过CSS来美化el-tree组件。以下是一个简单的例子，展示如何自定义el-tree的样式：

1. 首先，在项目的全局样式文件中（例如styles.css或app.css），添加自定义样式来覆盖默认的el-tree样式。

/* 自定义树节点内容样式 */
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
 
/* 修改选中节点的背景色 */
.el-tree .el-tree-node__content:hover {
  background-color: #f5f7fa;
}
 
/* 修改节点图标 */
.el-tree .el-tree-node__expand-icon {
  color: #c0c4cc;
}
 
/* 其他自定义样式... */

2. 在Vue组件中，使用el-tree组件并应用自定义节点内容：

<template>
  <el-tree
    :data="treeData"
    class="custom-tree"
    :props="defaultProps"
    node-key="id"
    default-expand-all
  >
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span>{{ node.label }}</span>
        <!-- 其他自定义内容，如图标或按钮 -->
      </span>
    </template>
  </el-tree>
</template>
 
<script setup>
import { ref } from 'vue';
 
const treeData = ref([
  // 树形数据
]);
 
const defaultProps = {
  children: 'children',
  label: 'label'
};
</script>
 
<style>
/* 使用上面定义的CSS类和样式 */
</style>

在这个例子中，我们使用了template #default来自定义节点内容，并且应用了.custom-tree-node类来改变节点的样式。您可以根据需要添加更多的自定义样式。