《ElementUI/Plus 基础知识》el-tree 之修改可拖拽节点的高亮背景和线

前言

收到需求，PM 觉得可拖拽节点的高亮背景和线样式不明显！CSS 样式得改！
注意：下述方式适用于ElementUI el-tree 和 ElementPlus el-tree！

修改

拖拽被叠加节点的背景色和文字

• 关键类名 is-drop-inner

.el-tree-node.is-drop-inner>.el-tree-node__content .el-tree-node__label{background-color: red;color: yellow;
}

• 修改前效果：如图所示，被叠加的高亮节点为蓝底白字；
  
• 修改后效果：如图所示，被叠加的高亮节点为红底黄字；
  

拖拽插入节点之间的高亮线

• 关键类名 el-tree__drop-indicator

.el-tree__drop-indicator {height: 3px;background-color: red;
}

• 修改前效果：如图所示，高亮线为高1px ，蓝色；
  

• 修改后效果：如图所示，高亮线为高3px ，红色；
  

完整代码

<template><el-tree:data="data"show-checkboxdraggablenode-key="id":default-expanded-keys="[2, 3]":default-checked-keys="[5]"></el-tree>
</template>
<script>export default {data() {return {data: [{id: 1,label: '一级 2',children: [{id: 3,label: '二级 2-1',children: [{id: 4,label: '三级 3-1-1'}, {id: 5,label: '三级 3-1-2',disabled: true}]}, {id: 2,label: '二级 2-2',disabled: true,children: [{id: 6,label: '三级 3-2-1'}, {id: 7,label: '三级 3-2-2',disabled: true}]}]}],defaultProps: {children: 'children',label: 'label'}};}};
</script>
<style>
// 拖拽时，被叠加节点的背景色和文字
.el-tree-node.is-drop-inner>.el-tree-node__content .el-tree-node__label{background-color: red;color: yellow;
}
// 拖拽时，插入节点之间的高亮线
.el-tree__drop-indicator {height: 3px;background-color: red;
}
</style>

最后

ElementUI el-tree 和 ElementPlus el-tree 皆可用~