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

Element Ui Tree组件实现增、删、改、查、拖拽节点 的树形结构_element ui 树形表格 增删改查

作者：weixin_40725706 | 2024-02-20 01:38:40

赞

踩

element ui 树形表格 增删改查

介绍：首先组件 | Element官网某些功能都具备了，这里我就把这些功能结合在一起更完美的使用，其次编辑节点官网是没有实例，所以这里搞了一套较完整的功能，其次编辑和添加，这里直接使用了弹窗（顾及到多个参数设置），接下来效果图展示！

效果图如下：

1，其中点击展开/折叠看个人需求；

2，组件中 :default-checked-keys="List_id" （如： 获取所有权限，匹配改个节点（角色）所包含的权限，修改时默认勾选，List_id 该角色拥有权限的id的集合！）讲述的可能稍有复杂，代码有注释可以看看！

（自己引入相关插件）

    src: url('../css/element-icons.woff') format("woff");这个是图标不展示问题

 这里就直接展示代码了！

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<link rel="stylesheet" href="../css/index.css" />
  7. 		<link rel="stylesheet" href="../css/element-ui.css" />
  8. 		<script src="../js/vue.js"></script>
  9. 		<script src="../js/element-ui.js"></script>
  10. 		<style type="text/css">
  11. 			@font-face {
  12. 				font-family: element-icons;
  13. 				src: url('../css/element-icons.woff') format("woff");
  14. 				font-weight: 400;
  15. 				font-display: "auto";
  16. 				font-style: normal
  17. 			}
  18.  
  19. 			.fade-enter-active,
  20. 			.fade-leave-active {
  21. 				transition: opacity 5s
  22. 			}
  23.  
  24. 			.fade-enter,
  25. 			.fade-leave-active {
  26. 				opacity: 0
  27. 			}
  28.  
  29. 			.custom-tree-node {
  30. 				flex: 1;
  31. 				/* display: flex; */
  32. 				align-items: center;
  33. 				justify-content: space-between;
  34. 				font-size: 14px;
  35. 				padding-right: 8px;
  36. 			}
  37.  
  38. 			.show-hide:hover :nth-child(2) {
  39. 				display: inline-block !important;
  40. 			}
  41.  
  42. 			.el-tree-node__content {
  43. 				height: 30px !important;
  44. 			}
  45.  
  46. 			.el-input__inner {
  47. 				height: 28px !important;
  48. 			}
  49.  
  50. 			em {
  51. 				color: red;
  52. 				font-style: inherit !important;
  53. 			}
  54.  
  55. 			.el-input__inner {
  56. 				height: 20px;
  57. 			}
  58.  
  59. 			.dialog_input>input {
  60. 				height: 34px !important;
  61. 			}
  62.  
  63. 			input.el-input__inner {
  64. 				height: 34px !important;
  65. 			}
  66.  
  67. 			.btn_is {
  68. 				padding: 7px !important;
  69. 				font-size: 15px !important;
  70. 				background: rgb(39, 99, 220);
  71. 				color: white;
  72. 			}
  73.  
  74. 			.el-tree {
  75. 				overflow-y: auto;
  76. 				max-height: calc(100vh - 180px);
  77. 				border-bottom: 1px solid #c8c8c8;
  78. 				padding: 5px 0px;
  79. 			}
  80.  
  81. 			.dialog_input {
  82. 				width: 400px !important;
  83. 			}
  84.  
  85. 			input.el-input__inner {
  86. 				width: 80%;
  87. 			}
  88. 		</style>
  89. 	</head>
  90. 	<body>
  91. 		<div id="app">
  92. 			<template>
  93. 				<el-button class="btn_is" size="medium" @click="toggleRowExpansion()">全部展开/折叠</el-button>
  94. 				<el-input placeholder="输入关键字" v-model="filterText" highlight-current></el-input>
  95. 				<!-- default-expand-all:默认打开全部
  96. 				 :expand-on-click-node="true" 打开点击当前行节点-->
  97. 				<el-tree v-if="refreshTable" :default-expand-all="isExpandAll" :data="data" class="filter-tree"
  98. 					:highlight-current="true" :filter-node-method="filterNode" show-checkbox node-key="id" ref="tree"
  99. 					highlight-current :props="defaultProps" @node-drag-start="handleDragStart"
  100. 					@node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd"
  101. 					@node-drop="handleDrop" :allow-drop="allowDrop" :allow-drag="allowDrag" draggable
  102. 					:expand-on-click-node="false" :default-checked-keys="List_id">
  103. 					<span class="custom-tree-node show-hide keywords_em" slot-scope="{ node, data }">
  104. 						<span class="ssss" v-if="filterText != ''" v-html="ruleTitle(node.label)"></span>
  105.  
  106. 						<span class="ddd" v-if="filterText == ''" v-text="data.label"></span>
  107. 						<span style="display:none">
  108. 							<el-button v-if="data.id !== 1" v-if="data.id!=1" type="text" size="mini"
  109. 								@click="() => edit(node,data)">
  110. 								<i class="el-icon-edit"></i>
  111. 							</el-button>
  112. 							<el-button type="text" size="mini" @click="() => append(node,data)">
  113. 								<i class="el-icon-plus"></i>
  114. 							</el-button>
  115. 							<el-button type="text" size="mini" @click="() => remove(node, data)">
  116. 								<i class="el-icon-delete"></i>
  117. 							</el-button>
  118. 						</span>
  119. 					</span>
  120. 				</el-tree>
  121. 				<!-- 编辑 -->
  122. 				<el-dialog style="width: 100%;height: 100%;" title="角色权限修改" :visible.sync="upd_dialog">
  123. 					<div>
  124. 						<el-form :model="upd_data">
  125. 							<el-form-item label="名称：" width="80px">
  126. 								<el-input class="dialog_input" v-model="upd_data.label"></el-input>
  127. 							</el-form-item>
  128. 							<el-form-item label="id：" width="80px">
  129. 								<el-input class="dialog_input" v-model="upd_data.id"></el-input>
  130. 							</el-form-item>
  131. 						</el-form>
  132. 					</div>
  133. 					<div slot="footer" class="dialog-footer">
  134. 						<button class="submitbtn" @click="upd_submit">提 交</button>
  135. 						<button class="censelbtn" @click="cancel">取 消</button>
  136. 					</div>
  137. 				</el-dialog>
  138. 				<!-- 添加 -->
  139. 				<el-dialog style="width: 100%;height: 100%;" title="角色权限添加" :visible.sync="zdydialog">
  140. 					<div>
  141. 						<el-form :model="add_data">
  142. 							<el-form-item label="名称：" width="80px">
  143. 								<el-input class="dialog_input" v-model="add_data.label"></el-input>
  144. 							</el-form-item>
  145. 							<el-form-item label="序号：" width="80px">
  146. 								<el-input class="dialog_input" v-model="add_data.id"></el-input>
  147. 							</el-form-item>
  148. 						</el-form>
  149. 					</div>
  150. 					<div slot="footer" class="dialog-footer">
  151. 						<button class="submitbtn" @click="add_submit">提 交</button>
  152. 						<button class="censelbtn" @click="cancel">取 消</button>
  153. 					</div>
  154. 				</el-dialog>
  155. 			</template>
  156. 		</div>
  157. 	</body>
  158. 	<script>
  159. 		new Vue({
  160. 			el: "#app",
  161. 			data() {
  162. 				return {
  163. 					data: [{
  164. 						id: 1,
  165. 						label: '一级',
  166. 						children: [{
  167. 							id: 4,
  168. 							label: '二级',
  169. 							children: [{
  170. 								id: 9,
  171. 								label: '三级'
  172. 							}, {
  173. 								id: 10,
  174. 								label: '三级'
  175. 							}]
  176. 						}]
  177. 					}, {
  178. 						id: 2,
  179. 						label: '一级',
  180. 						children: [{
  181. 							id: 5,
  182. 							label: '二级'
  183. 						}, {
  184. 							id: 6,
  185. 							label: '二级'
  186. 						}]
  187. 					}, {
  188. 						id: 3,
  189. 						label: '一级',
  190. 						children: [{
  191. 							id: 7,
  192. 							label: '二级'
  193. 						}, {
  194. 							id: 8,
  195. 							label: '二级'
  196. 						}]
  197. 					}],
  198. 					newApiGroupName: '',
  199. 					defaultProps: {
  200. 						children: 'children',
  201. 						label: 'label'
  202. 					},
  203. 					updateApiGroup: {},
  204. 					id: 1000,
  205. 					resetNodeForm: {},
  206. 					filterText: '',
  207. 					newname: '',
  208. 					isExpandAll: true,
  209. 					refreshTable: true,
  210. 					List_id: [5, 7], //匹配到的id默认勾选，
  211. 					zdydialog: false,
  212. 					upd_dialog: false,
  213. 					add_data: {},
  214. 					upd_data: {},
  215. 				};
  216. 			},
  217. 			watch: {
  218. 				filterText(val) {
  219. 					console.log(val)
  220. 					this.$refs.tree.filter(val);
  221. 				}
  222. 			},
  223. 			created() {},
  224. 			methods: {
  225. 				edit(node, row) {
  226. 					console.log(row)
  227. 					this.upd_dialog = true
  228. 					this.upd_data = row
  229. 				},
  230. 				upd_submit() {
  231. 					//调取相关接口
  232. 					this.upd_dialog = false
  233. 				},
  234.  
  235. 				append(node, row) {
  236. 					this.add_data = {
  237. 						id: '',
  238. 						label: '',
  239. 					}
  240. 					if (!row.children) {
  241. 						this.$set(row, 'children', [])
  242. 					}
  243. 					row.children.push(this.add_data)
  244. 					console.log(this.add_data)
  245. 					this.zdydialog = true
  246. 				},
  247. 				add_submit() {
  248. 					//调取相关接口
  249. 					this.zdydialog = false
  250. 				},
  251. 				cancel() {
  252. 					this.upd_dialog = false;
  253. 					this.zdydialog = false;
  254. 				},
  255. 				// 全部展开/折叠
  256. 				toggleRowExpansion() {
  257. 					this.refreshTable = false;
  258. 					this.isExpandAll = !this.isExpandAll;
  259. 					this.$nextTick(() => {
  260. 						this.refreshTable = true;
  261. 					});
  262. 				},
  263. 				// 高亮搜索的关键字
  264. 				ruleTitle(items) {
  265. 					const title = items
  266. 					const rep = new RegExp(this.filterText, 'g')
  267. 					const resDtring = `<span style="color: #145afe">${this.filterText}</span>`
  268. 					return title.replace(rep, resDtring)
  269. 				},
  270. 				//筛选结点
  271. 				filterNode(value, data, node) {
  272. 					if (!value) return true;
  273. 					return this.findSearKey(node, value);
  274. 				},
  275. 				// 拖拽
  276. 				handleDragStart(node, ev) {
  277. 					console.log('drag start', node.data.label)
  278. 				},
  279. 				handleDragEnter(draggingNode, dropNode, ev) {
  280. 					console.log('tree drag enter: ', dropNode.data.label)
  281. 				},
  282. 				handleDragLeave(draggingNode, dropNode, ev) {
  283. 					console.log('tree drag leave: ', dropNode.data.label)
  284. 				},
  285. 				handleDragOver(draggingNode, dropNode, ev) {
  286. 					console.log('tree drag over: ', dropNode.data.label)
  287. 				},
  288. 				handleDragEnd(draggingNode, dropNode, dropType, ev) {
  289. 					console.log(
  290. 						'tree drag end: ',
  291. 						dropNode && dropNode.data.label,
  292. 						dropType
  293. 					)
  294. 					// 调后端更新
  295. 					// this.updateApiGroup(this.data)
  296. 				},
  297. 				handleDrop(draggingNode, dropNode, dropType, ev) {
  298. 					console.log('tree drop: ', dropNode.data.label, dropType)
  299. 				},
  300. 				allowDrop(draggingNode, dropNode, type) {
  301. 					if (dropNode.data.id === 1) {
  302. 						return false
  303. 					} else {
  304. 						return true
  305. 					}
  306. 				},
  307. 				allowDrag(draggingNode) {
  308. 					// 顶层默认分组不允许拖拽
  309. 					if (draggingNode.data.id === 1) {
  310. 						return false
  311. 					} else {
  312. 						return true
  313. 					}
  314. 					// return draggingNode.data.apiGroupName.indexOf('三级 3-2-2') === -1
  315. 				},
  316. 				remove(node, data) {
  317. 					const parent = node.parent
  318. 					const children = parent.data.children || parent.data
  319. 					const index = children.findIndex(d => d.id === data.id)
  320. 					children.splice(index, 1)
  321. 					// this.updateApiGroup(this.data)
  322. 				},
  323. 			}
  324. 		})
  325. 	</script>
  326. </html>

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

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

  

闽ICP备14008679号