019Element-plus的el-tree功能预研1-重写样式

本文链接：https://blog.youkuaiyun.com/qq_25753445/article/details/127536675

本文探讨了Element-plus的el-tree组件，介绍了如何重写其样式，包括研究官方文档，初始化源代码示例，理解el-tree的默认样式结构，通过CSS穿透处理原生样式，以及利用插槽重新定义label区域的样式内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

019Element-plus的el-tree功能预研1-重写样式

el-tree的官方文档

https://element-plus.gitee.io/zh-CN/component/tree.html

初始化源代码示例

<template>
  <el-tree
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"
    :data="data"
    draggable
    default-expand-all
    node-key="id"
    @node-drag-start="handleDragStart"
    @node-drag-enter="handleDragEnter"
    @node-drag-leave="handleDragLeave"
    @node-drag-over="handleDragOver"
    @node-drag-end="handleDragEnd"
    @node-drop="handleDrop"
  />
</template>

<script lang="ts" setup>
import type Node from 'element-plus/es/components/tree/src/model/node'
import type {
     
      DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type {
     
      DropType } from 'element-plus/es/components/tree/src/tree.type'

const handleDragStart = (node: Node, ev: DragEvents) => {
     
     
  console.log('drag start', node)
}
const handleDragEnter = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
     
     
  console.log('tree drag enter:', dropNode.label)
}
const handleDragLeave = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
     
     
  console.log('tree drag leave:', dropNode.label)
}
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
     
     
  console.log('tree drag over:', dropNode.label)
}
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: DropType,
  ev: DragEvents
) => {
     
     
  console.log('tree drag end:', dropNode && dropNode.label