devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

自定义《element-UI》el-tree 的样式 、亲测管用_el-tree样式

作者：AllinToyou | 2024-03-27 06:57:22

赞

踩

el-tree样式

目录

 第一种 切换箭头打开和折叠 ：

 第二种 修改箭头打开和折叠 + 动画：

 第三种 修改箭头打开和折叠 + 一二级自定义图标：

 第四种在el-tree前加复选框和图标

 第五种 Vue3 + ts 封装

ab2e230e8501412b9b9e7bedd2d0dc69.gif

第一种 切换箭头打开和折叠 ：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

  1. <template>
  2.   <div class="tree">
  3.     <el-tree
  4.       :data="data5"
  5.       :props="props"
  6.       show-checkbox
  7.       node-key="id"
  8.       default-expand-all
  9.     >
  10.     </el-tree>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       props: {
  19.         label: "label",
  20.         children: "children",
  21.       },
  22.       data5: [
  23.         {
  24.           id: 1,
  25.           label: "一级 1",
  26.           icon: "el-icon-success",
  27.           children: [
  28.             {
  29.               id: 4,
  30.               label: "二级 1-1",
  31.               children: [
  32.                 {
  33.                   id: 9,
  34.                   label: "三级 1-1-1",
  35.                   icon: "el-icon-info",
  36.                 },
  37.                 {
  38.                   id: 10,
  39.                   label: "三级 1-1-2",
  40.                 },
  41.               ],
  42.             },
  43.           ],
  44.         },
  45.         {
  46.           id: 2,
  47.           label: "一级 2",
  48.           children: [
  49.             {
  50.               id: 5,
  51.               label: "二级 2-1",
  52.             },
  53.             {
  54.               id: 6,
  55.               label: "二级 2-2",
  56.             },
  57.           ],
  58.         },
  59.         {
  60.           id: 3,
  61.           label: "一级 3",
  62.           children: [
  63.             {
  64.               id: 7,
  65.               label: "二级 3-1",
  66.             },
  67.             {
  68.               id: 8,
  69.               label: "二级 3-2",
  70.             },
  71.           ],
  72.         },
  73.       ],
  74.     };
  75.   },
  76. };
  77. </script>
  78. <style lang="scss" scoped>
  79.  
  80.  
  81. ::v-deep .el-icon-caret-right:before {
  82.   content: "y";
  83.   font-size: 16px;
  84. }
  85.  
  86. ::v-deep .expanded:before {
  87.   content: "x";
  88.   font-size: 16px;
  89. }
  90. </style>

 第二种 修改箭头打开和折叠 + 动画：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

  1. <template>
  2.   <div class="tree">
  3.     <el-tree
  4.       icon-class="user"
  5.       :data="data5"
  6.       :props="props"
  7.       show-checkbox
  8.       node-key="id"
  9.       default-expand-all
  10.     >
  11.       <span class="custom-tree-node" slot-scope="{ node, data }">
  12.         <span> <i :class="node.icon"></i>{{ node.label }} </span>
  13.       </span>
  14.     </el-tree>
  15.   </div>
  16. </template>
  17.  
  18. <script>
  19. export default {
  20.   data() {
  21.     return {
  22.       props: {
  23.         label: "label",
  24.         children: "children",
  25.       },
  26.       data5: [
  27.         {
  28.           id: 1,
  29.           label: "一级 1",
  30.           icon: "el-icon-success",
  31.           children: [
  32.             {
  33.               id: 4,
  34.               label: "二级 1-1",
  35.               children: [
  36.                 {
  37.                   id: 9,
  38.                   label: "三级 1-1-1",
  39.                   icon: "el-icon-info",
  40.                 },
  41.                 {
  42.                   id: 10,
  43.                   label: "三级 1-1-2",
  44.                 },
  45.               ],
  46.             },
  47.           ],
  48.         },
  49.         {
  50.           id: 2,
  51.           label: "一级 2",
  52.           children: [
  53.             {
  54.               id: 5,
  55.               label: "二级 2-1",
  56.             },
  57.             {
  58.               id: 6,
  59.               label: "二级 2-2",
  60.             },
  61.           ],
  62.         },
  63.         {
  64.           id: 3,
  65.           label: "一级 3",
  66.           children: [
  67.             {
  68.               id: 7,
  69.               label: "二级 3-1",
  70.             },
  71.             {
  72.               id: 8,
  73.               label: "二级 3-2",
  74.             },
  75.           ],
  76.         },
  77.       ],
  78.     };
  79.   },
  80. };
  81. </script>
  82. <style lang="scss" scoped>
  83. /deep/.user {
  84.   //   background: url("../../assets/logo.png");
  85.   background: url("../../assets/logo.png");
  86.   
  87.   box-sizing: border-box;
  88.   background-size: 100%;
  89.   background-repeat: no-repeat;
  90. }
  91. /deep/.el-tree-node__expand-icon {
  92.   transform: rotate(-90deg);
  93. }
  94. /deep/.el-tree-node__expand-icon.expanded {
  95.   transform: rotate(0deg);
  96. }
  97. </style>

 第三种 修改箭头打开和折叠 + 一二级自定义图标：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

  1. <template>
  2.   <div class="ov-container">
  3.     <el-tree :data="data" :props="defaultProps">
  4.       <span class="custom-tree-node" slot-scope="{ node, data }">
  5.         <i v-if="node.level == 1" class="province" />
  6.         <i v-else-if="node.level == 2" class="city" />
  7.         <i v-else-if="node.level == 3" />
  8.         {{ data.label }}
  9.       </span>
  10.     </el-tree>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.   name: "index",
  17.   data() {
  18.     return {
  19.       data: [
  20.         {
  21.           label: "一级 1",
  22.           children: [
  23.             {
  24.               label: "二级 1-1",
  25.               children: [
  26.                 {
  27.                   label: "三级 1-1-1",
  28.                 },
  29.               ],
  30.             },
  31.           ],
  32.         },
  33.         {
  34.           label: "一级 2",
  35.           children: [
  36.             {
  37.               label: "二级 2-1",
  38.               children: [
  39.                 {
  40.                   label: "三级 2-1-1",
  41.                 },
  42.               ],
  43.             },
  44.             {
  45.               label: "二级 2-2",
  46.               children: [
  47.                 {
  48.                   label: "三级 2-2-1",
  49.                 },
  50.               ],
  51.             },
  52.           ],
  53.         },
  54.         {
  55.           label: "一级 3",
  56.           children: [
  57.             {
  58.               label: "二级 3-1",
  59.               children: [
  60.                 {
  61.                   label: "三级 3-1-1",
  62.                 },
  63.               ],
  64.             },
  65.             {
  66.               label: "二级 3-2",
  67.               children: [
  68.                 {
  69.                   label: "三级 3-2-1",
  70.                 },
  71.               ],
  72.             },
  73.           ],
  74.         },
  75.         {
  76.           label: "一级 4",
  77.           children: [
  78.             {
  79.               label: "三级 3-2-1",
  80.             },
  81.           ],
  82.         },
  83.         {
  84.           label: "一级 4",
  85.         },
  86.       ],
  87.     };
  88.   },
  89. };
  90. </script>
  91.  
  92. <style scoped lang="scss">
  93. .ov-container {
  94.   height: calc(100vh - 80px);
  95.   background: #ffffff;
  96.   border-radius: 5px;
  97.   margin: 10px;
  98. }
  99.  
  100. .province {
  101.   background: url("../../assets/logo.png");
  102.   width: 17px;
  103.   height: 14px;
  104.   display: inline-block;
  105.    background-size: 100% 100%;
  106.  
  107. }
  108.  
  109. .city {
  110.   background: url("../../assets/图片2.png") no-repeat;
  111.   width: 17px;
  112.   height: 14px;
  113.   display: inline-block;
  114.   background-size: 100% 100%;
  115.  
  116. }
  117.  
  118. .line {
  119.   background: url("../../assets/百花.png") no-repeat;
  120.   background-size: 100%;
  121.  
  122.   width: 17px;
  123.   height: 14px;
  124.   display: inline-block;
  125. }
  126.  
  127. .data {
  128.   background: url("../../assets/花朵.png") no-repeat;
  129.   background-size: 100%;
  130.  
  131.   width: 17px;
  132.   height: 14px;
  133.   display: inline-block;
  134. }
  135.  
  136. .el-tree /deep/ .el-tree-node__expand-icon.expanded {
  137.   -webkit-transform: rotate(0deg);
  138.   transform: rotate(0deg);
  139. }
  140. //有子节点 且未展开
  141. .el-tree /deep/ .el-icon-caret-right:before {
  142. //   background: url("../../assets/logo.png") no-repeat 0 0;
  143.   content: "√";
  144.   display: block;
  145.   width: 12px;
  146.   height: 12px;
  147.   font-size: 16px;
  148.   background-size: 100% 100%;
  149. }
  150. //有子节点 且已展开
  151. .el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  152. //   background: url("../../assets/logo.png") no-repeat 0 0;
  153.   content: "x";
  154.   display: block;
  155.   width: 12px;
  156.   height: 12px;
  157.   font-size: 12px;
  158.   background-size: 100% 100%;
  159. }
  160. //没有子节点
  161. .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
  162. //    background: url("../../assets/logo.png") no-repeat 0 0;
  163.   content: "";
  164.   display: block;
  165.   width: 12px;
  166.   height: 12px;
  167.   font-size: 16px;
  168.   background-size: 100% 100%;
  169. }
  170. </style>

 第四种在el-tree前加复选框和图标

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

第五种 Vue3 + ts 封装

  1. <template>
  2. 	<!-- 
  3. 	ref="treeRef" 用于获取树型组件的实例
  4. 	:check-strictly="checkStrictly" 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法
  5. 	:indent="0" 树节点的缩进距离，设为0即取消缩进。
  6. 	:show-checkbox="props.isShowCheckbox" 是否显示复选框，通过 props.isShowCheckbox 来控制。
  7. 	:default-expand-all="props.expandAll" 是否默认展开所有节点，通过 props.expandAll 来控制
  8. 	:default-checked-keys="props.checkedKeys" 默认选中的节点的 key 的数组
  9. 	:data="props.treeData" 展示数据 树的数据源，通过 props.treeData 来控制
  10. 	:props="defaultProps" 配置选项，设置树节点的属性，通过 defaultProps 来控制。
  11. 	:accordion="props.accordion" 是否每次只展开一个子树节点(手风琴)，通过 props.accordion 来控制。
  12. 	node-key="id" 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
  13. 	@node-click="onCurAllNodes" 点击树节点触发的事件 onCurAllNodes 是该函数的名称。
  14. 	@node-expand="onHandleExpand" 节点被展开的事件 onHandleExpand 是该函数的名称。
  15. 	@check-change="getCheckedAllNodes" 勾选状态发生变化时的事件回调函数，getCheckedNodes 是该函数的名称。
  16. 	check-on-click-node 点击节点时选中节点，默认值为 false。
  17.  
  18. 	<i :class="checkIconByNodeLevel(node)" />：根据节点的层级来动态设置节点前面的图标样式。
  19. 	{{ node.label }}：显示节点的标签文本。需要根据实际的数据结构来获取。props="defaultProps" 、数据源、node.label 三者需要保持一致。
  20. 	示例：
  21. 			<template>
  22. 				<zw-tree
  23. 					:treeData="treeData"
  24. 					@onCurAllNodes="onCurAllNodes"
  25. 					@getCheckedAllNodes="getCheckedAllNodes"
  26. 					@onHandleExpand="onHandleExpand"
  27. 				/>
  28. 			</template>
  29.  
  30. 		<script setup lang="ts" name="Tree">
  31. 		import { ref } from 'vue';
  32. 		const treeData = ref([{}]);
  33.  
  34. 		const onCurAllNodes = (data: object) => {
  35. 			console.log('当前节点下所有节点：', data);
  36. 		};
  37.  
  38. 		const onHandleExpand = (data: object) => {
  39. 			console.log('展开节点时触发：', data);
  40. 		};
  41. 		const getCheckedAllNodes = (data: object) => {
  42. 			console.log('复选框改变：', data);
  43. 		};
  44. 		</script>
  45.  
  46.  -->
  47. 	<el-tree
  48. 		ref="treeRef"
  49. 		class="tree-line"
  50. 		:check-strictly="checkStrictly"
  51. 		:indent="0"
  52. 		:show-checkbox="props.isShowCheckbox"
  53. 		:default-expand-all="props.expandAll"
  54. 		:default-checked-keys="props.checkedKeys"
  55. 		:data="props.treeData"
  56. 		:props="defaultProps"
  57. 		:accordion="props.accordion"
  58. 		node-key="id"
  59. 		@node-click="onCurAllNodes"
  60. 		@node-expand="onHandleExpand"
  61. 		@check-change="getCheckedAllNodes"
  62. 		check-on-click-node
  63. 	>
  64. 		<template #default="{ node }">
  65. 			<i :class="checkIconByNodeLevel(node)" /> {{ node.label }}
  66. 		</template>
  67. 	</el-tree>
  68. </template>
  69.  
  70. <script lang="ts" setup>
  71. import { defineExpose, ref } from 'vue';
  72. // 默认配置
  73. const defaultProps = {
  74. 	children: 'children',
  75. 	label: 'label',
  76. };
  77.  
  78. interface Tree {
  79. 	label: string;
  80. 	children?: Tree[];
  81. }
  82.  
  83. const treeRef = ref();
  84.  
  85. const props = defineProps({
  86. 	// 树型数据
  87. 	treeData: {
  88. 		type: Array,
  89. 		default: () => {
  90. 			return [];
  91. 		},
  92. 	},
  93. 	// 是否全部展开
  94. 	expandAll: {
  95. 		type: Boolean,
  96. 		default: () => {
  97. 			return true;
  98. 		},
  99. 	},
  100. 	// 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法
  101. 	checkStrictly: {
  102. 		type: Boolean,
  103. 		default: () => {
  104. 			return false;
  105. 		},
  106. 	},
  107. 	checkedKeys: {
  108. 		type: Array,
  109. 		default: () => {
  110. 			return [];
  111. 		},
  112. 	},
  113. 	isShowCheckbox: {
  114. 		type: Boolean,
  115. 		default: () => {
  116. 			return true;
  117. 		},
  118. 	},
  119. 	accordion: {
  120. 		type: Boolean,
  121. 		default: () => {
  122. 			false;
  123. 		},
  124. 	},
  125. });
  126.  
  127. // 根据节点层级显示不同的图标
  128. const checkIconByNodeLevel = (node: {
  129. 	childNodes: [];
  130. 	expanded: boolean;
  131. 	data: { id: number };
  132. }) => {
  133. 	if (node.childNodes.length == 0) {
  134. 		return 'iconfont icon-24gl-fileEmpty';
  135. 	} else {
  136. 		if (node.expanded) {
  137. 			return 'iconfont icon-wenjianzhankai';
  138. 		}
  139. 		return 'iconfont icon-jian';
  140. 	}
  141. };
  142.  
  143. // 定义事件
  144. const emits = defineEmits([
  145. 	'onCurAllNodes',
  146. 	'getCheckedAllNodes',
  147. 	'onHandleExpand',
  148. ]);
  149.  
  150. // 点击事件
  151. const onCurAllNodes = (data: Tree) => {
  152. 	emits('onCurAllNodes', data);
  153. };
  154. // 复选框改变事件
  155. const getCheckedAllNodes = (data: Tree) => {
  156. 	emits('getCheckedAllNodes', data);
  157. };
  158. // 展开事件
  159. const onHandleExpand = (data: Tree) => {
  160. 	emits('onHandleExpand', data);
  161. };
  162.  
  163. defineExpose({
  164. 	treeRef,
  165. });
  166. </script>
  167.  
  168. <style lang="scss" scoped>
  169. @import url('/@/myIcon/iconfont.css');
  170. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/322486
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号