element自定义树形结构

1css样式部分

.centerChapter-box .el-tree-node__content {
				height: 100%;
				width: 100%;
				
			}
.centerChapter-box .el-tree-node > .el-tree-node__children{
				overflow:inherit;
			}
.tree-b-box {
	position: relative;
	width: 100%;

}
.tree-box-w {
	height: 100%;
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}

.tree-box {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
}
.tree_content_box {
	display: flex !important;
	align-items: center;
}
.tree-iocn-box {
	width: 24px;
	height: 24px;
}
.tree-iocn-box img {
	width: 100%;
	height: 100%;
}
.tree-t {
	margin-left: 10px;
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.finish-box {
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #969696 !important;
}
.share-box {
	position: absolute;
	top: 0;
	box-shadow: 0px 2px 9px 0px rgba(16, 26, 57, 0.15);
	border-radius: 4px;
	padding: 10px 20px 20px 10px;
	left: 300px;
	z-index: 9999;
}

2.html

<div class="centerChapter-box  mt-10">
								<div class="tree-b-box">
									<el-tree ref="tree"    highlight-current   :data="listData" node-key="id"   @node-click="handleNodeClick"  accordion @node-contextmenu="rowContextmenu">
										<div class="custom-tree-node tree-b-box" slot-scope="{node,data }" >
											<div class="tree-box-w"  @dblclick="dblClickItem(node,data)">
												<div class="tree-box icon-b">
													<div class="tree_content_box">
														<div v-if="fileTypeIcon(node,data)!=null" class="tree-iocn-box"><img  :src="fileTypeIcon(node,data)" class="name-col-icon" alt="文件类型图标"/></div>
														<div class="tree-t">{{data.name}}</div>
													</div>
													<div class="finish-box">已学习完：{{data.learnProgress}}%</div>
												</div>
											</div>
											<div v-if="menuVisible==data.id"  class="share-box">
												<share-button  @foo="foo" ref="contextbutton"  @handleclick="handleclick"></share-button>
											</div>
										</div>
									</el-tree>
								</div>
							</div>

3js

data: function () {
    return {
      listData:[
					{
						children:[
							{
								children:[
									{
										annex: 34,
										chapterId: 91,
										filePath: "",
										id: "795206",
										isCollect: 0,
										learnId: 54,
										learnProgress: 0,
										name: "wedsfsdf",
										suffix: "jpg",
									},
									{
										annex: 34,
										chapterId: 91,
										filePath: "",
										id: "795206",
										isCollect: 0,
										learnId: 54,
										learnProgress: 0,
										name: "123213",
										suffix: "jpg",
									}
								],
								id: 91,
								learnProgress: 0,
								name: "第二",
							}
						],
						id: 90,
						learnProgress: 0,
						name: "第一",
					}
				]
    }
  },
  methods: {
    rowContextmenu(event, data, node) {
			console.log(data, '鼠标右击的值')
			if (node.childNodes.length == 0) {
				this.menuVisible = data.id
				this.$nextTick(() => {
					this.$refs.contextbutton.init(event, data != null)

				})
			}
		},
       dblClickItem(node, data) {
			console.log('双击节点出发',data)
			data.id = data.annex
			console.log(this.userInfo,'userInfo')
			data.show=true;
			this.detalisbtn(data)
		},
      // 根据文件类型显示图标
		fileTypeIcon(node, data) {
			let _path = null;
			// 文件夹
			if (data.type === 'dir') {
				return "";
			}
			// 其他根据后缀类型
			let _suffix = data.suffix;
			if (!_suffix) {
				return null;
			}
			if (["jpg", "jpeg", "png", "gif", "bmp"].includes(_suffix)) {
				_path = "";
			} else if (["zip", "rar", "7z"].includes(_suffix)) {
				_path = "";
			} else if (
				["avi", "mp4", "rmvb", "flv", "mov", "m2v", "mkv"].includes(_suffix)
			) {
				_path = "";
			} else if (["mp3", "wav", "wmv", "wma"].includes(_suffix)) {
				_path = "";
			} else if (["xls", "xlsx"].includes(_suffix)) {
				_path = "";
			} else if (["doc", "docx"].includes(_suffix)) {
				_path = "";
			} else if ("pdf" === _suffix) {
				_path = "";
			} else if ("ppt" === _suffix || "pptx" === _suffix) {
				_path = "";
			} else if ("txt" === _suffix) {
				_path = "";
			} else {
				_path = null;
			}
			return _path;
		},
  },

标签：box,suffix,自定义,tree,element,树形,path,else,data
来源： https://blog.csdn.net/m0_46701899/article/details/122103609