以下是基于Vue.js和
Element UI的
代码实现
示例：
```html
<template>
<div>
<
el-button type="primary" @click="handleAddParent">新增父节点</
el-button>
<
el-
dialog title="添加父节点" :visible.sync="parent
DialogVisible" width="30%">
<
el-form :mod
el="parentForm" lab
el-width="100px">
<
el-form-item lab
el="父节点名称">
<
el-input v-mod
el="parentForm.name"></
el-input>
</
el-form-item>
</
el-form>
<div slot="footer" class="
dialog-footer">
<
el-button @click="parent
DialogVisible = false">取 消</
el-button>
<
el-button type="primary" @click="addParent">确 定</
el-button>
</div>
</
el-
dialog>
<
el-tree :data="treeData" :props="treeProps" :node-key="treeNodeKey" :expand-on-click-node="false" @node-click="handleNodeClick"></
el-tree>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [], // 树结构数据
treeProps: { // 树结构props配置
children: 'children',
lab
el: 'name'
},
treeNodeKey: 'id', // 树节点key
parent
DialogVisible: false, // 添加父节点弹框是否显示
parentForm: { // 添加父节点表单数据
name: ''
},
currentS
electedNode: null // 当前选中的树节点
}
},
methods: {
// 点击新增父节点
按钮
handleAddParent() {
this.parent
DialogVisible = true
},
// 添加父节点
addParent() {
if (!this.parentForm.name) {
this.$message.error('请输入父节点名称')
return
}
// 调用API保存父节点数据
// ...
// 添加新父节点到树结构
const newParentNode = {
id: 1, // 通过API返回的新节点ID
name: this.parentForm.name,
children: []
}
this.treeData.push(newParentNode)
this.parent
DialogVisible = false
this.$message.success('添加成功')
},
// 点击树节点
handleNodeClick(node) {
this.currentS
electedNode = node
},
// 修改节点名称
updateNodeName() {
if (!this.currentS
electedNode) {
this.$message.error('请选择需要修改的节点')
return
}
// 调用API修改节点名称
// ...
this.$message.success('修改成功')
},
// 删除节点
d
eleteNode() {
if (!this.currentS
electedNode) {
this.$message.error('请选择需要删除的节点')
return
}
this.$confirm('确定删除该节点吗?', '提示', {
type: 'warning'
}).then(() => {
// 调用API删除节点
// ...
const parentNode = this.currentS
electedNode.parent
if (parentNode) {
const siblingNodes = parentNode.children
const index = siblingNodes.findIndex(node => node.id === this.currentS
electedNode.id)
siblingNodes.splice(index, 1)
}
else {
const index = this.treeData.findIndex(node => node.id === this.currentS
electedNode.id)
this.treeData.splice(index, 1)
}
this.currentS
electedNode = null
this.$message.success('删除成功')
}).catch(() => {})
}
}
}
</script>
```
以上
示例中，我们通过`
el-button`和`
el-
dialog`实现了添加树节点的功能。当用户点击“新增父节点”
按钮时，弹出一个对话框，用户输入父节点名称后，点击“确定”
按钮，将新节点保存到后端，并添加到树结构中。
另外，我们还实现了修改节点名称和删除节点的功能。当用户点击树节点时，记录下当前选中的节点，在用户点击“修改节点名称”或“删除节点”
按钮时，根据当前选中的节点调用API进行相应操作，并更新树结构数据。
本文展示了如何在Element-UI中删除Dialog标题并自定义关闭按钮图标。通过添加CSS样式修改关闭按钮的背景图及位置，同时通过设置`showClose`属性为`false`来隐藏默认关闭图标。此外，提供了实现这一效果的完整代码示例。
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
