地方电商门户网站如何建设方案,上海企业网站建站模板,网站优化设计的基础是网站基本要素及每个细节的优化,开平建设局网站根据业务需要#xff0c;实现树结构的节点新增编辑删除功能#xff0c;主要逻辑是利用树节点的scopedSlots属性对其进行自定义改造#xff0c;监听悬停事件在节点右侧出现增删改对应图标#xff0c;点击图标出现弹窗表单对内容进行修改#xff0c;具体代码如下#xff1a…根据业务需要实现树结构的节点新增编辑删除功能主要逻辑是利用树节点的scopedSlots属性对其进行自定义改造监听悬停事件在节点右侧出现增删改对应图标点击图标出现弹窗表单对内容进行修改具体代码如下
// 模板部分
templatea-treev-iffactorTreeData.length 0show-icondefault-expand-parent:tree-datafactorTreeData:defaultExpandAlltrue:autoExpandParenttrue:default-selected-keysselectedKeysselectonTreeSelecttemplate slotcustom slot-scopeitemdiv mouseenteronMouseEnter(item) styleposition: relative;span classtreeModea-icon v-if!item.isLeaf :typeitem.expanded ? folder-open : folder /a-icon typefile v-ifitem.isLeaf/span stylemargin-left: 5px{{ item.title }}/span/spana-spaceclick.stopv-ifmouseItemId item.keystyleposition: absolute; right: 5px; top: 0a-button typeprimary sizesmall iconplus clickaddTreeNode(item) /a-button typeprimary sizesmall iconedit clickeditTreeNode(item) /a-button typeprimary sizesmall icondelete clickdelTreeNode(item) //a-space/div/template/a-treea-modalv-drag-modalv-modelvisible:titlemodalTitle:destroyOnClosetrueokhandleSave:width800:bodyStyle{height: 480px, overflow-y: auto}centeredItemModal refchildModal :formObjformObj//a-modal
/template//js部分
scriptexport default {components: {ItemModal: () import (./item-modal) // 表单弹窗},data () {return {// 树结构factorTreeData: [],expandedKeys: [],selectedKeys: [],mouseItemId: ,// 弹窗modalTitle: ,visible: false,formObj: {}}},mounted () {this.getTreeData()},methods: {// 获取树模拟数据getTreeData () {this.factorTreeData [{title: 0-0,key: 0-0,children: [{title: 0-0-0,key: 0-0-0,children: [{ title: 0-0-0-0, key: 0-0-0-0 },{ title: 0-0-0-1, key: 0-0-0-1 },{ title: 0-0-0-2, key: 0-0-0-2 },],},{title: 0-0-1,key: 0-0-1,children: [{ title: 0-0-1-0, key: 0-0-1-0 },{ title: 0-0-1-1, key: 0-0-1-1 },{ title: 0-0-1-2, key: 0-0-1-2 },],},],}]this.dealTreeData(this.factorTreeData || [])this.selectedKeys [this.factorTreeData.children[0].key]this.mouseItemId this.factorTreeData.children[0].key},// 给每个节点添加自定义属性dealTreeData (dataArr) {dataArr.forEach((el, i) {el.value el.key if (el.children el.children.length 0) {el.isLeaf falseel.selectable falseel[scopedSlots] { title: custom } this.dealTreeData(el.children)} else {el.isLeaf trueel[scopedSlots] { title: custom }}})},// 节点选择事件onTreeSelect (selectedKeys) {},// 树鼠标悬停事件onMouseEnter (item) {this.mouseItemId item.key},// 添加树节点addTreeNode (item) {this.formObj {id: null,pid: item.parentId,name: ,displayOrder: ,status: ,remark: }this.modalTitle 新增this.visible true},// 编辑树节点editTreeNode (item) {getTreeInfo({ id: item.id }).then(res {if (res.code 200) {this.formObj {id: res.result[0].id,pid: res.result[0].pid,name: res.result[0].name,displayOrder: res.result[0].displayOrder,status: res.result[0].status,remark: res.result[0].remark}this.modalTitle 编辑this.visible true}}).catch(err console.log(err))},// 保存树节点handleSave() {},// 删除树节点delTreeNode (item) {const that thisthis.$confirm({title: 确定要删除吗,onOk () {delTree({ ids: item.id }).then(res {if (res.code 200) {that.$message.success(删除成功)that.getTree() // 重新请求树数据} else {that.$message.error(删除失败)}}).catch(err {console.log(err)this.$message.error(删除失败)})}})}}
/scriptstyle langless scoped// 树::v-deep .ant-tree {li {padding: 1px 0;}.ant-tree-node-content-wrapper {width: calc(100% - 24px);height: 32px;line-height: 32px;}.treeMode {height: 30px;width: 70%;display: flex;align-items: center;span {height: 30px;display: inline-block;max-width: 80%;overflow: hidden;text-overflow: ellipsis;padding-right: 5px;}}}::v-deep .ant-tree.ant-tree-directory li span.ant-tree-node-content-wrapper::before {height: 32px;}/style
示例
