山东住房建设厅官网站,房产公司网站模板,wordpress建立数据库失败,北京app外包公司哪家好特性 可以自定义主键、配置选项支持预定义节点图标#xff1a;folder文件夹|normal普通样式多个提示文本可以自定义支持动态接口增删改节点可以自定义根节点id可以设置最多允许添加的层级深度支持拖拽排序#xff0c;排序过程还可以针对拖拽的节点深度进行自定义限制支持隐藏… 特性 可以自定义主键、配置选项支持预定义节点图标folder文件夹|normal普通样式多个提示文本可以自定义支持动态接口增删改节点可以自定义根节点id可以设置最多允许添加的层级深度支持拖拽排序排序过程还可以针对拖拽的节点深度进行自定义限制支持隐藏一级节点根节点复选框☑支持屏蔽一级节点根节点勾选☑ sgTree源码 templatediv :class$options.namediv classtree-header v-if!(readonly || readonly )div classsg-lefttemplate v-ifuploadDatael-tooltippopper-classsg-el-tooltip:enterablefalseeffectdark:content支持拖拽到树上传文件placementtop-startel-buttontypetexticonel-icon-uploadsizeminiclick(d) $refs.sgUpload.triggerUploadFile()批量导入/el-button/el-tooltipel-button typetext iconel-icon-download sizemini clickdownloadTpl下载模板/el-button/template/divdiv classsg-rightel-button typetext sizemini click.stopaddRoot{{ (data.text || {}).addRootButtonText || 添加根节点}}i classel-icon-circle-plus-outline/i/el-button/div/divdiv classtree-containerel-tree:classhideRootNodeCheckbox || hideRootNodeCheckbox? hideRootNodeCheckbox: reftree:datatreeData:node-keymainKey:propsdata.props || {label: label, //指定节点标签为节点对象的某个属性值children: children, //指定子树为节点对象的某个属性值disabled: leaf, //指定节点选择框是否禁用为节点对象的某个属性值isLeaf: leaf, //指定节点是否为叶子节点仅在指定了 lazy 属性的情况下生效}:icon-class${data.iconType}-tree-node:indentdata.indent || 10current-changecurrent_changenode-clicknodeClickhighlight-currentnode-drag-startnodeDragStartnode-drag-enternodeDragEnternode-drag-leavenodeDragLeavenode-drag-overnodeDragOvernode-drag-endnodeDragEndnode-dropnodeDrop:draggabledraggable || draggable:allow-dropallowDrop:allow-dragallowDrag:show-checkboxshowCheckbox:default-checked-keysdefaultCheckedKeyscheck-changehandleCheckChangeel-popoverpopper-classtree-el-popoverplacementrighttriggerhovertitlecontent:disabledreadonly || readonly slot-scope{ node, data }span classrightel-buttontitle添加typetextsizeiconel-icon-circle-plus-outlineclick.stopaddNode(node, data)v-ifshowAddButton(node)添加/el-buttonel-buttontitle删除typetextsizeiconel-icon-remove-outlineclick.stopremove(node, data)删除/el-button/spandiv slotreference classnode-labeldiv classleft :titlenode.label{{ node.label }}/div/div/el-popover/el-tree!-- 上传组件 --sgUpload:disabledWhenShowSels[.v-modal]:draguploadData ? dragUpload : falserefsgUpload:datauploadDatauploadSuccessuploadSuccessuploadErroruploadErrorimportErrorimportErrorshowLoadingshowLoadinghideLoadinghideLoadinghideUploadTray//div/div
/templatescript
import sgUpload from /vue/components/admin/sgUpload;
export default {name: sgTree,components: {sgUpload,},data() {return {// 动态树增删改_________________________________________________________rootNode: null, //根节点rootResolve: null, //根节点focusNodeId: null, //聚焦高亮新添加IDmainKey: id, //默认主键defaultRootId: root, //默认根节点ID就是rootmaxAddLevel: null, // 最多允许添加的层级dragUpload: true, //在拖拽节点过程中控制上传组件能否拖拽上传// _________________________________________________________};},props: [treeData,data,readonly,draggable, //是否开启拖拽节点功能uploadData,/* 例子 uploadData: {accept: .xls,.xlsx,actionUrl: ${this.$d.API_ROOT_URL}/core/resource/upload,}, */allowNodeDrag,allowNodeDrop,showCheckbox, //节点是否可被选择hideRootNodeCheckbox, //隐藏一级节点复选框☑disabledRootNode, //屏蔽一级节点勾选☑defaultCheckedKeys, //默认勾选的节点的 key 的数组],watch: {data: {/* data.iconType 节点图标folder 文件夹normal 普通样式plus 加减符号样式*/handler(d) {d.nodeKey (this.mainKey d.nodeKey); //主键d.rootId (this.defaultRootId d.rootId); //根节点IDd.maxAddLevel (this.maxAddLevel d.maxAddLevel); // 最多允许添加的层级},deep: true,immediate: true,},},methods: {showLoading(file) {this.$emit(showLoading, file);},hideLoading(file) {this.$emit(hideLoading, file);},// 取消选中unCheckAll(d) {this.$refs.tree.setCheckedKeys([]);this.handleCheckChange([], []);},handleCheckChange(data, checked, indeterminate) {this.$emit(checkChange, {checkedNodes: this.$refs.tree.getCheckedNodes(),checkedLeafOnlyNodes: this.$refs.tree.getCheckedNodes(true, false), //(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数1. 是否只是叶子节点默认值为 false 2. 是否包含半选节点默认值为 false【注意懒加载树形不管用必须要明确叶子节点展开后面没有子节点了才能识别】data,checked,indeterminate,});},// 拖拽----------------------------------------nodeDragStart(node, ev) {this.dragUpload false;this.$emit(nodeDragStart, node, ev);},nodeDragEnter(draggingNode, dropNode, ev) {this.$emit(nodeDragEnter, draggingNode, dropNode, ev);},nodeDragLeave(draggingNode, dropNode, ev) {this.$emit(nodeDragLeave, draggingNode, dropNode, ev);},nodeDragOver(draggingNode, dropNode, ev) {this.$emit(nodeDragOver, draggingNode, dropNode, ev);},nodeDragEnd(draggingNode, dropNode, dropType, ev) {// dropType有before、after、inner和none4种情况this.dragUpload true;this.$emit(nodeDragEnd, draggingNode, dropNode, dropType, ev);},nodeDrop(draggingNode, dropNode, dropType, ev) {// dropType有before、after、inner和none4种情况this.$emit(nodeDrop, draggingNode, dropNode, dropType, ev);},allowDrop(draggingNode, dropNode, dropType) {// 拖拽时判定目标节点能否被放置。dropType 参数有三种情况prev、inner 和 next分别表示放置在目标节点前、插入至目标节点和放置在目标节点后注意很奇葩上面node开头的绑定方法dropType有before、after、inner和none4种情况return this.allowNodeDrop? this.allowNodeDrop(draggingNode, dropNode, dropType): true;},allowDrag(draggingNode) {return this.allowNodeDrag ? this.allowNodeDrag(draggingNode) : true;},// ----------------------------------------showAddButton(node) {if (this.maxAddLevel) {return node.level this.maxAddLevel; // 最多允许添加的层级} else return true;},downloadTpl(d) {this.$emit(downloadTpl);},uploadSuccess(d, f) {this.$emit(uploadSuccess, d, f);},uploadError(d, f) {this.$emit(uploadError, d, f);},importError(d, f) {this.$emit(importError, d, f);},// 聚焦到某一个节点focusNode(id) {if (!id) return;this.$nextTick(() {this.$refs.tree.setCurrentKey(id); //高亮显示某个节点this.$emit(currentChange, this.$refs.tree.getCurrentNode());this.$nextTick(() {let dom document.querySelector(.el-tree-node.is-current);dom dom.scrollIntoView({behavior: smooth,block: nearest,inline: nearest,}); //缓慢滚动});});},// 添加根节点addRoot() {this.addNode(this.$refs.tree.root, { [this.mainKey]: this.defaultRootId });},// 通过id展开指定节点通常是用于外部调用expandNodeById(id) {let node this.$refs.tree.getNode(id);node.expand();},//通过id勾选节点setCheckedKeys(ids) {this.$refs.tree.setCheckedKeys(ids);},// 添加节点addNode(node, data) {let resolve (d) {if (data.ID this.defaultRootId) {this.treeData.unshift(d);} else {data.children || this.$set(data, children, []);data.children.push(d);}node.expand();};let reject (d) {this.rootLoading false;node.loading false;this.$message.error(d.msg); //添加节点失败};this.$emit(addNode, { node, data, resolve, reject });},// 删除节点remove(node, data) {this.$confirm((this.data.text || {}).removeConfirmTip ||此操作将永久删除该节点及其下面的节点是否继续,(this.data.text || {}).removeConfirmTitle || 提示,{dangerouslyUseHTMLString: true,confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(() {this.removeNodeData(node, data);}).catch(() {});},// 删除节点数据通过接口向后台删除数据removeNodeData(node, data) {node.loading true; //出现加载动画let resolve (d) {node.loading false;this.$message.success(删除成功);// 从父节点异步删除子节点const parent node.parent;const children parent.data.children || parent.data;const index children.findIndex((d) d[this.mainKey] data[this.mainKey]);children.splice(index, 1);// 从显示界面删除节点有bug只是删除了树节点的Virtual DOM实际数据还在/* let childNodes node.parent.childNodes; childNodes.splice( childNodes.findIndex((d) d.data[this.mainKey] data[this.mainKey]), 1 ); */};let reject (d) {this.rootLoading false;node.loading false;this.$message.error(d.msg); //删除失败};this.$emit(removeNode, { node, data, resolve, reject });},// 当前选中节点变化时触发的事件current_change(d) {this.$emit(currentChange, d);},//点击节点nodeClick(d) {this.focusNodeId null;this.$emit(nodeClick, d);},},
};
/scriptstyle langscss scoped
import ~/css/sg;.sgTree {$treeHeaderHeight: 30px;width: 100%;height: 100%;display: flex;flex-wrap: nowrap;flex-direction: column;white-space: nowrap;flex-shrink: 0;flex-grow: 1;position: relative;.tree-header {display: flex;justify-content: space-between;align-items: center;height: $treeHeaderHeight; .sg-left {} .sg-right {}}.tree-container {position: relative;overflow: auto;box-sizing: border-box;height: calc(100% - #{$treeHeaderHeight});flex-shrink: 0;flex-grow: 1;user-select: none;include scrollbarHover();/* .tree-container .el-tree .el-tree-node__content {cursor: pointer;} */ .el-tree--highlight-current .el-tree-node.is-current .el-tree-node__content {background-color: #409eff22; // 高亮当前选中节点背景} .el-tree {* {transition: none;}.el-tree-node__children {min-width: max-content; //这样才会出现水平滚动条}.normal-tree-node,.plus-tree-node,.folder-tree-node { label:not(.el-checkbox) {/*单行省略号*/overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}flex-shrink: 0;display: block;padding: 0 !important;margin: 0;width: 20px;height: 20px;margin-right: 5px;background: transparent url(~/../static/img/fileType/folder/folder.svg)no-repeat center / contain;margin-left: 20px; ~ span:not(.el-icon-loading) {width: 100%;.node-label {height: 40px;display: flex;align-items: center;}}.expanded {flex-shrink: 0;transform: rotate(0deg);background-image: url(~/../static/img/fileType/folder/folder-open.svg);}.is-leaf {background-image: none;}}.normal-tree-node {margin-left: 10px;background-image: url(~/../static/img/fileType/folder/arrow-right.svg);.expanded {transform: rotate(90deg);background-image: url(~/../static/img/fileType/folder/arrow-right.svg);}.is-leaf {background-image: none;}}.plus-tree-node {margin-left: 10px;background-image: url(~/../static/img/fileType/folder/plus.svg);.expanded {background-image: url(~/../static/img/fileType/folder/minus.svg);}.is-leaf {background-image: none;}}// 隐藏一级节点的复选框.hideRootNodeCheckbox div .el-tree-node__content .el-checkbox {display: none;}}}
}.tree-el-popover {.el-button {padding-top: 0;padding-bottom: 0;}
}
/style应用
templatediv :class$options.namesgTreev-loadingloading:key$route.query.BMID sgTree_fresh:treeDatatreeData:datatreeConfigDatacurrentChangecurrentChangeaddNodeaddNoderemoveNoderemoveNode:uploadData{name: file,accept: .xls,.xlsx,actionUrl: ${$d.API_ROOT_URL}/core/column/importColumn, //批量导入树结构接口actionData: {BMID: $global.getBMID(),PID: root,sgLog: 强哥请求来源${$options.name}导入栏目xls,},}uploadSuccessuploadSuccessuploadErroruploadErrorimportErrorimportErrordownloadTpldownloadTpldraggable:allowNodeDropallowNodeDropnodeDragEndnodeDragEnd//div
/templatescript
import sgTree from /vue/components/admin/sgTree;
export default {name: sgBody,components: {sgTree,},data() {return {sgTree_fresh: false,autoId: 0, //自增编号treeConfigData: {nodeKey: ID, //主键props: { label: MC, isLeaf: leaf }, //配置选项iconType: plus, //节点图标folder文件夹|normal普通样式|plus加减符号样式text: {addRootButtonText: 添加根目录, //添加根节点按钮文本removeConfirmTitle: 警告, //删除节点提示标题removeConfirmTip: 此操作将永久删除该节点及其下面的子节点是否继续, //删除节点提示内容},},treeData: [],loading: false,};},created() {this.initTreeData();},methods: {//初始化数据initTreeData({ d } {}) {this.$global.获取整棵树的数据({cb: (d) {this.treeData d;},});},// 拖拽节点相关方法----------------------------------------allowNodeDrop(draggingNode, dropNode, dropType) {// 只允许拖拽同级别前后排序let isPrevOrNext dropType prev || dropType next;// 同在第一级根节点下let isSameRootLevel draggingNode.level dropNode.level draggingNode.level 1;// 同在一个节点非根节点下let isSameChildLevel draggingNode.parent dropNode.parent draggingNode.parent.data dropNode.parent.data draggingNode.parent.data.ID dropNode.parent.data.ID;return isPrevOrNext (isSameRootLevel || isSameChildLevel);},nodeDragEnd(draggingNode, dropNode, dropType, ev) {// 只允许拖拽同级别前后排序let isBeforeOrAfter dropType before || dropType after;if (isBeforeOrAfter) {/* console.log(被拖拽的节点, draggingNode.data.MC, draggingNode.data.PXZ); console.log(停靠的节点, dropNode.data.MC, dropNode.data.PXZ); */let theSameLevelDatas (dropNode.parent.childNodes || []).map((v) v.data); // 获取同一级节点数据theSameLevelDatas.forEach((v, i) (v.PXZ i)); //重新排序// console.log(拖拽排序, theSameLevelDatas); //这里需要调用后台接口let IDS theSameLevelDatas.map((v) v.ID); //排序后的ID顺序数组let data {IDS,sgLog: 强哥请求来源${this.$options.name}更改同一层级树节点排序值,};this.$d.修改节点排序({data,r: {s: (d) {// console.log(【成功】, d);},},});}},// ----------------------------------------// 获取当前聚焦节点的数据currentChange(d) {console.log(, d);},// 添加节点addNode({ data, resolve }) {this.$d.新增节点({data: {MC: 新增节点名称(${this.autoId}),},doing: {l: { show: () (this.loading true), close: () (this.loading false) },s: (d) resolve(d),f: (d) reject(d), //删除失败},});},// 删除节点removeNode({ node, data, resolve, reject }) {this.$d.删除节点({data: { ID: data.ID },doing: {s: (d) resolve(d),f: (d) reject(d), //删除失败},});},updateList(d) {},uploadSuccess(d, f) {this.sgTree_fresh !this.sgTree_fresh;},uploadError(d, f) {this.$message.error(d.msg);},// 导入失败importError(d, f) {},// 下载导入模板downloadTpl(d) {},},
};
/script关联懒加载树节点组件【sgLazyTree】自定义组件动态懒加载el-tree树节点数据实现增删改、懒加载及局部数据刷新。_el-tree 动态刷新-CSDN博客文章浏览阅读464次。【代码】【sgLazyTree】自定义组件动态懒加载el-tree节点数据实现增删改。_el-tree 动态刷新https://blog.csdn.net/qq_37860634/article/details/132639389
